Ich versuche, einen Benutzernamen aus einer Firebase-Datenbank in einer React-Return-Funktion anzuzeigen.
Ich habe eine Funktion namens getUserName, die den Benutzernamen aus der Datenbank abruft und zurückgibt.
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";
};
}
Dann versuche ich es in der Rückgabe der Reaktionskomponente anzuzeigen.
return (
<div>
Hi, {getUserName()}!
</div>
)
Aber ich bekomme diesen Fehler:
类型“Promise
Ich bin mir nicht sicher, was ich hier falsch mache. Ich verwende TypeScript. Muss ich den Typ also irgendwo angeben?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
错误信息非常清楚。 要解决此问题，您可以修改
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> ); };