在 React 返回中運行非同步函數

Question

我正在嘗試在 React 返回函數中顯示 Firebase 資料庫中的使用者名稱。

我有一個名為 getUserName 的函數，它從資料庫檢索使用者名稱並傳回它。

const getUserName = async () => {
        try {
            const docRef = doc(db, "users/" + auth.currentUser?.uid);
            const userDocument = await getDoc(docRef);
            const userData = userDocument.data() as UserData;
            const userName = userData.name.split(' ')[0];
            return userName;
        } catch (error) {
            console.error(error)
            return "Failed to Retrieve UserName";
        };
    }

然後我嘗試在反應組件的返回中顯示它。

return (
  <div>
    Hi, {getUserName()}!
  </div>
)

但我收到此錯誤： 類型「Promise」不可指派給類型「ReactNode」。 ts(2322) const getUserName: () => Promise

#不確定我在這裡做錯了什麼。我正在使用 TypeScript，所以我需要在某處指定類型嗎？

Answer 1

錯誤訊息非常清楚。 要解決此問題，您可以修改 getUserName 函數以使用 useState 掛鉤來儲存使用者名稱 並非同步更新。

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [userName, setUserName] = useState('');

  useEffect(() => {
    const getUserName = async () => {
      try {
        // some code here
        setUserName(userName);
      } catch (error) {
        console.error(error);
        setUserName("Failed to Retrieve UserName");
      }
    };
    getUserName();
  }, []);

  return (
    <div>
      Hi, {userName}!
    </div>
  );
};