React17+Firebase v9页面加载时onAuthStateChanged触发不稳定问题求助

修复方案 #

1. 回滚AuthProvider的监听逻辑

你后续修改的把pathname作为监听useEffect依赖的写法是错误根源。onAuthStateChanged只需要在AuthProvider挂载时注册一次即可，随路由变化反复销毁重建监听，会大概率出现回调丢失的情况，改回最初的空依赖写法即可。

2. 增加主动状态兜底判断

iOS Safari在非调试模式下会对IndexedDB（Firebase Auth默认存储登录状态的介质）做性能优化，偶发出现初始化读取延迟，导致onAuthStateChanged回调延后。你可以在监听之外增加兜底超时逻辑，3秒没收到回调就主动读取当前登录状态：

useEffect(() => {
  const unsubscribe = onAuthStateChanged(
    auth,
    (user) => {
      setCurrentUser(user);
      setIsInitialized(true);
    },
  );
  // 新增兜底逻辑
  const timer = setTimeout(() => {
    if (!isInitialized) {
      setCurrentUser(auth.currentUser);
      setIsInitialized(true);
    }
  }, 3000);

  return () => {
    unsubscribe();
    clearTimeout(timer);
  };
}, []);

3. 显式指定Auth持久化级别

在初始化Firebase Auth之后，显式指定持久化级别为本地存储，避免Safari的存储策略自动清理登录状态：

import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";

const auth = getAuth();
setPersistence(auth, browserLocalPersistence);

4. 确认路由渲染逻辑

保持当前AuthProvider的逻辑即可：只有isInitialized为true之后才渲染子路由，避免在状态未就绪时触发不必要的跳转。

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