我正在嘗試在 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,所以我需要在某處指定類型嗎?
P粉0091864692023-09-08 00:16:12
錯誤訊息非常清楚。
要解決此問題,您可以修改 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> ); };