Firebase Auth对象变更无法触发useEffect状态更新问题求助

你的问题核心在于Firebase的auth对象引用不会随用户状态变化而改变，所以监听[auth]的useEffect只会在初始渲染和auth初始化完成时触发两次，后续用户登录/登出时auth引用不变，useEffect不会重新执行。同时auth.currentUser仅能获取初始值，无法自动同步后续的状态变化。

正确的做法是使用Firebase官方推荐的onAuthStateChanged方法，订阅用户认证状态的实时变化：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const YourComponent = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true); // 处理初始加载延迟

  useEffect(() => {
    const auth = getAuth();
    // 订阅用户状态变化，登录/登出/Token刷新时都会触发回调
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setIsLoading(false); // 初始化完成，更新加载状态
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 初始加载阶段可展示加载态，避免因auth初始化延迟直接显示登录窗口
  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (!user) {
    return <Login />;
  }

  // 用户已登录时的页面内容
  return (
    <div>
      <h1>欢迎，{user.displayName || user.email}</h1>
      {/* 其他业务组件 */}
    </div>
  );
};

export default YourComponent;

关键细节说明： #

• onAuthStateChanged会在所有用户认证状态变更时触发回调，确保user状态始终与Firebase同步。
• 必须在组件卸载时调用unsubscribe()取消订阅，防止内存泄漏。
• 新增isLoading状态是为了处理Firebase Auth初始化的延迟，避免初始阶段因user为null就直接渲染登录窗口，等初始化完成后再根据实际状态展示内容。

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