如何等待认证相关Promise解析？React+Firebase认证场景方案

我正在开发一个集成Firebase认证的React应用，登录成功后会从Firestore数据库查询用户文档以获取登录用户的全名。该全名在应用的多个组件中使用，但有时组件会在认证流程完成前渲染，导致全名为undefined。请问这种场景下的常规实践是什么？是在所有使用全名的地方检查其是否不为undefined，还是有办法让应用等待包含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");
  }
}

在这种场景下，业内常规是两种方法结合使用，既保证用户体验，又避免渲染错误：

1. 等待完整流程完成后再渲染核心组件 #

你当前代码的问题在于setLoading(false)的时机不对——它会在Firestore查询还没完成时就结束加载，导致子组件提前渲染拿到undefined的userData。

修正后的AuthContext逻辑应该把结束加载的操作放在异步请求完成后：

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(async (user) => {
    try {
      if (user) {
        setCurrentUser(user);
        // await后拿到的是实际数据，无需加Promise后缀
        const userData = await getUserData(user);
        setUserData(userData);
      } else {
        setCurrentUser(null);
        setUserData(null);
      }
    } catch (err) {
      console.error("加载用户数据失败:", err);
      // 错误兜底，避免数据状态异常
      setUserData(null);
    } finally {
      // 无论成功或失败，最后再结束加载状态
      setLoading(false);
    }
  });
  return unsubscribe;
}, []);

这样就能确保只有当Firebase认证状态确定、且用户数据从Firestore拉取完成后，才渲染子组件。此时子组件拿到的userData要么是有效数据，要么是null，不会出现undefined。

另外，你可以把LinearProgress换成骨架屏这类更友好的加载占位，提升用户等待时的体验。

2. 组件内做防御性检查（兜底方案） #

即使全局做了加载等待，也建议在使用userData的组件里做局部检查，应对一些边界情况（比如用户数据被删除、网络异常导致加载失败）：

方式一：可选链+空值合并 #

const { userData } = useContext(AuthContext);

return (
  <div>
    <span>欢迎回来，{userData?.fullName ?? "用户"}</span>
  </div>
);

方式二：条件渲染 #

const { userData } = useContext(AuthContext);

if (!userData) {
  return <span>加载中...</span>; // 局部小加载提示，适配组件级的等待场景
}

return <span>欢迎回来，{userData.fullName}</span>;

为什么要结合两种方法？ #

• 全局加载等待能减少子组件的重复加载逻辑，让代码更简洁；
• 局部防御检查能处理全局覆盖不到的边界情况，让组件更健壮，避免意外崩溃。

内容的提问来源于stack exchange，提问作者Maarten