我试图在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";
};
}
然后我试图在react组件的返回中显示它。
return (
<div>
Hi, {getUserName()}!
</div>
)
但我得到了这个错误:Type 'Promise<string>' is not assignable to type 'ReactNode'.ts(2322) const getUserName: () => Promise<string>
不知道我做错了什么。我正在使用TypeScript,所以我需要在某处指定类型吗?
2条答案
按热度按时间tcomlyy61#
错误信息很清楚。要解决这个问题,可以修改
getUserName
函数,使用useState
钩子来存储username
并异步更新它。t98cgbkg2#
我建议将API调用放入
React.useEffect()
并将其存储在状态中。React需要一个ReactNode
,如错误中所示,但你的函数返回了一个promise(通过async
)。React不会在return语句中解析它。