Firebase Auth用户数据更新回调：如何自动监听用户信息变更同步UI

Firebase 的 onAuthStateChanged 仅监听用户登录/登出状态的变更，不会在用户资料（如昵称、邮箱）更新时自动触发回调。要实现无需手动触发的用户信息变更监听，可以通过以下两种方式解决：

方法1：使用 onIdTokenChanged 替代 onAuthStateChanged #

当用户资料发生变更时，Firebase 会刷新用户的 ID Token，onIdTokenChanged 会在 Token 刷新时触发回调，此时可以获取到最新的用户信息。结合 user.reload() 能确保拿到最实时的用户资料：

useEffect(() => {
  const unsubscribe = onIdTokenChanged(auth, async (currentUser) => {
    if (currentUser) {
      // 强制刷新用户资料，确保获取最新数据
      await currentUser.reload();
      setUser(currentUser);
    } else {
      setUser(null);
    }
    setCheckingStatus(false);
  });

  return () => unsubscribe();
}, []); // 无需依赖 checkingStatus，回调会自动触发

方法2：更新用户资料后手动同步本地状态 #

如果你的业务中存在主动更新用户资料的场景（比如调用 updateProfile），可以在更新操作完成后直接同步本地状态，这种方式更高效及时：

const updateUserProfile = async (newProfile) => {
  try {
    const user = auth.currentUser;
    if (!user) return;
    
    // 更新 Firebase 端的用户资料
    await updateProfile(user, newProfile);
    // 同步更新本地状态
    setUser({ ...user, ...newProfile });
  } catch (error) {
    console.error("更新用户资料失败:", error);
  }
};

为什么原方案需要手动触发？ #

你之前通过修改 checkingStatus 触发 useEffect 重新执行，本质是重新订阅 onAuthStateChanged，但这个回调本身不会响应用户资料变更，所以只能通过手动触发的方式强制刷新。上述两种方法可以避免手动操作，实现自动监听。

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