Firebase onAuthStateChanged()偶现返回null用户的问题求助

我花了一整天排查Firebase SDK的onAuthStateChanged()问题——这个回调有时会传入null用户，无规律且和浏览器环境无关。一开始以为是代码时序问题，但用react-firebase-hooks这类第三方库仍能复现。现在怀疑是配置问题，而且一旦返回null后就再也不会返回有效用户，已经卡住开发了。

相关代码 #

import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { Auth, getAuth, IdTokenResult, onAuthStateChanged, User } from 'firebase/auth';
import { FirebaseContext, Props } from './FirebaseProvider';
import { Claims } from './Claims';

export type AuthContext = {
  auth: Auth | null,
  authLoading: boolean,
  idTokenResult: IdTokenResult | null,
  hasClaim: (claim: Claims) => boolean,
  user: User | null
}

export const AuthContext = createContext<AuthContext>({
  auth: null,
  authLoading: true,
  idTokenResult: null,
  hasClaim: null,
  user: null
});

export const AuthProvider = (props: Props) => {
  const { children } = props;
  const firebaseApp = useContext(FirebaseContext);
  const [authInitializing, setAuthInitializing] = useState(true);
  const [auth, setAuth] = useState<Auth | null>(null);
  const [authLoading, setAuthLoading] = useState(true);
  const [user, setUser] = useState<User | null>(null);
  const [idTokenResult, setIdTokenResult] = useState<IdTokenResult | null>(null);

  useEffect(() => {
    if (firebaseApp !== null) {
      setAuth(getAuth());
      setAuthInitializing(false);
    }
  }, [firebaseApp]);

  useEffect(() => {
    if (auth !== null) {
      onAuthStateChanged(auth, (user) => {
        setUser(user);
        setAuthLoading(false);
      });
    }
  }, [auth]);

  useEffect(() => {
    if (user !== null) {
      user.getIdTokenResult().then(idTokenResult => setIdTokenResult(idTokenResult));
    } else {
      setIdTokenResult(null);
    }
  }, [user]);

  const hasClaim = useCallback((claim: Claims) => {
    if (idTokenResult === null) return false;
    return idTokenResult.claims[claim] === true;
  }, [idTokenResult]);

  const providerValues = {
    auth,
    authLoading,
    hasClaim,
    idTokenResult,
    user
  };

  if (authInitializing) {
    return <h1>Loading</h1>;
  }

  return (
    <AuthContext.Provider value={providerValues}>{children}</AuthContext.Provider>
  );
};

排查方向 #

• 检查Auth持久化设置：默认持久化是local，若被改为session或none会导致状态丢失，可显式配置：

  import { setPersistence, browserLocalPersistence } from "firebase/auth";
  // 初始化auth后执行
  setPersistence(auth, browserLocalPersistence)
    .then(() => { /* 业务逻辑 */ })
    .catch((error) => { console.error(error); });
  

• 确保Auth实例唯一：如果Firebase App被多次初始化，会生成多个Auth实例导致状态不同步，需保证全局只有一个App和Auth实例。
• 监听令牌状态变化：补充onIdTokenChanged回调，排查null出现时令牌是否失效：

  onIdTokenChanged(auth, (user) => {
    console.log('令牌状态更新:', user?.uid);
  });
  

• 清理订阅避免内存泄漏：当前代码未处理onAuthStateChanged的订阅清理，组件卸载时可能引发异常状态，修改useEffect：

  useEffect(() => {
    if (auth !== null) {
      const unsubscribe = onAuthStateChanged(auth, (user) => {
        setUser(user);
        setAuthLoading(false);
      });
      return unsubscribe; // 组件卸载时取消订阅
    }
  }, [auth]);
  

• 验证Firebase配置正确性：确认firebaseConfig中的apiKey、authDomain等参数与项目后台完全一致，无拼写错误。
• 排查外部干扰：检查是否有其他代码调用signOut()/deleteUser()，或第三方插件篡改了localStorage中Firebase的Auth数据。

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