如何等待与身份验证相关的 Promise 解析？

问：

我正在创建一个具有 Firebase 身份验证的 React 应用程序。成功登录后，我正在查询 Firestore 数据库中的用户文档，以请求登录用户的全名。

此全名用于应用程序的多个部分。但是，这些组件有时会在身份验证完成之前呈现，从而使全名保持“未定义”。

这种情况通常的做法是什么？我是否应该检查全名在我使用全名的所有地方是否不是“未定义”的？或者有没有办法让应用程序等到完整的身份验证过程完成（包括 Firestore 查询），然后才呈现组件？

AuthContext

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(async (user) => {
    if (user) {
      // user is logged in
      setCurrentUser(user);
      const userDataPromise = await getUserData(user);
      setUserData(userDataPromise);
    } else {
      // user is logged out
      setCurrentUser(null);
      setUserData(null);
    }
    setLoading(false);
  });
  return unsubscribe;
}, []);

return (
  <AuthContext.Provider
    value={{
      currentUser,
      userData,
    }}
  >
    {loading ? <LinearProgress /> : children}
  </AuthContext.Provider>
);

getUserData：

export default async function getUserData(currentUser) {
  if (currentUser) {
    // Get user
    const userRef = doc(db, "users", currentUser.uid);
    const userSnap = await getDoc(userRef);
    if (!userSnap.exists()) {
      console.log("No user data found in the database.");
      return null;
    } else {
      const userData = userSnap.data();
      // some additional querying...
      return userData;
    }
  } else {
    console.warning("User not logged in");
  }
}