React用户更新资料后Navbar未同步更新的问题解决咨询

问题场景 #

开发的React身份认证应用中，用户在更新资料页面修改邮箱后，Dashboard能正常显示新邮箱，但Navbar无法同步更新——登录状态下的下拉菜单仍显示旧邮箱。Navbar逻辑为：登录时展示带用户邮箱的下拉菜单（含更新资料/登出选项），未登录时显示登录按钮。

问题根源 #

Firebase的onAuthStateChanged监听器仅在用户登录/登出时触发，当用户更新邮箱等个人信息时，该监听器不会自动触发。当前AuthContext中的currentUser状态仅在初始化和登录/登出时更新，导致Navbar读取的currentUser.email始终为旧值；而Dashboard因路由跳转重新渲染，直接读取了Firebase User对象的最新属性，但这种依赖对象内部属性变更的渲染不稳定。

可行解决方案 #

方案一：手动更新AuthContext中的currentUser #

在邮箱更新成功后，手动更新Context中的currentUser状态，强制触发依赖组件重新渲染。

修改AuthContext.js中的updateEmail方法：

const updateEmail = async (email) => {
  await currentUser.updateEmail(email);
  // 手动更新currentUser，触发Context更新
  setCurrentUser({ ...currentUser, email });
};

方案二：用onIdTokenChanged监听用户信息变更 #

Firebase的onIdTokenChanged监听器会在用户登录/登出、用户信息更新时触发，替换原有onAuthStateChanged，确保用户信息变更时Context自动同步。

修改AuthContext.js中的useEffect：

useEffect(() => {
  const unsubscribe = auth.onIdTokenChanged((user) => {
    setCurrentUser(user);
    setLoading(false);
  });
  return unsubscribe;
}, []);

冗余代码清理 #

Navbar中定义了未使用的email状态，直接删除即可：

const Navigation = () => {
  const { currentUser } = useAuth();
  // 移除无用的const [email, setEmail] = useState("");

  return (
    // 原有渲染逻辑不变
  );
};

验证效果 #

完成上述修改后，用户修改邮箱并跳转回Dashboard时，Navbar会自动读取Context中更新后的currentUser.email，同步显示新邮箱。

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