react-firebase-hooks中useAuthState/useIdToken无法稳定工作求助

问题场景 #

使用react-firebase-hooks的useAuthState()和useIdToken()时，间歇性出现异常状态：user为null、loading为false、error为null。该问题发生在谷歌登录流程中：页面正常跳转到谷歌登录页，重定向返回后无报错，但loading从true变为false后，user和error均为null，且无明显触发规律。

复现代码：

import { getAuth, signInWithEmailAndPassword, signOut } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';
import { GoogleAuthProvider } from 'firebase/auth';

const auth = getAuth(firebaseApp)

const login = () => {
  signInWithRedirect(auth, new GoogleAuthProvider());
};
const logout = () => {
  signOut(auth)
};

const CurrentUser = () => {
  const [user, loading, error] = useAuthState(auth);

  if (loading) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};

已确认firebaseApp初始化正确：

export const firebaseApp = initializeApp(firebaseConfig);

可能原因及对应解决方案 #

1. 重定向后未处理登录结果

使用signInWithRedirect时，重定向回应用后必须主动调用getRedirectResult完成登录流程，否则Auth状态无法正确同步。

修复代码：
在应用入口或Auth相关组件中添加结果处理逻辑：

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

const auth = getAuth(firebaseApp);

useEffect(() => {
  const handleRedirectResult = async () => {
    try {
      await getRedirectResult(auth);
      // 登录成功后Auth状态会自动同步，无需额外处理
    } catch (error) {
      console.error('重定向登录失败:', error);
    }
  };

  handleRedirectResult();
}, [auth]);

2. Firebase Auth持久化策略异常

默认的local持久化可能在浏览器隐私模式、存储异常场景下失效，导致状态无法留存。

修复方式：
显式设置持久化策略：

import { getAuth, setPersistence, browserLocalPersistence } from 'firebase/auth';
import { useEffect } from 'react';

const auth = getAuth(firebaseApp);

useEffect(() => {
  const setupPersistence = async () => {
    await setPersistence(auth, browserLocalPersistence);
  };
  setupPersistence();
}, [auth]);

3. 组件渲染时机过早

组件可能在Auth状态完全同步前完成渲染，捕获到中间状态。可以通过延迟确认状态稳定性优化。

优化组件逻辑：

import { useState, useEffect } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';

const CurrentUser = () => {
  const [user, loading, error] = useAuthState(auth);
  const [isAuthStable, setIsAuthStable] = useState(false);

  useEffect(() => {
    if (!loading) {
      // 延迟100ms确认状态稳定，避免瞬时状态误判
      const timer = setTimeout(() => setIsAuthStable(true), 100);
      return () => clearTimeout(timer);
    }
  }, [loading]);

  if (loading || !isAuthStable) {
    return <div><p>Initialising User...</p></div>;
  }
  if (error) {
    return <div><p>Error: {error}</p></div>;
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};

4. SDK版本兼容性问题

react-firebase-hooks与Firebase SDK版本不匹配可能引发状态同步异常。

修复方式：
更新至最新稳定版：

npm update firebase react-firebase-hooks

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