我正在嘗試在 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
#不確定我在這裡做錯了什麼。我正在使用 TypeScript，所以我需要在某處指定類型嗎？
錯誤訊息非常清楚。 要解決此問題，您可以修改
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> ); };