React+Redux下Firebase onAuthStateChanged对接React Router Dom问题

Firebase Auth 初始化是异步流程：页面首次加载时，onAuthStateChanged 监听器的回调还未触发，Redux 中存储的 currentUser 为初始值 null。此时 ProtectedRoutes 会误判用户未登录，直接重定向到认证页；等回调执行返回真实登录状态时，路由跳转已经完成，即使是已登录用户也会被错误跳转到登录页。
现有路由守卫的权限判断逻辑本身没有问题，缺失的是认证初始化加载状态的拦截判断。

1. 扩展Redux用户状态，新增加载标记 #

在用户相关的Reducer中新增isAuthLoading字段，初始值设为true，标记当前正在等待Firebase返回首次认证结果：

// 用户状态初始值示例
const initialUserState = {
  currentUser: null,
  isAuthLoading: true
}

同时新增对应action用来更新加载状态，比如setAuthLoading。

2. 改造路由守卫组件 #

不要把ProtectedRoutes定义在App组件内部（会随App重渲染重复创建组件，导致路由异常重挂载），建议抽为独立组件。在权限判断前先校验加载状态，认证流程未完成时不做路由跳转，渲染全局加载占位即可：

const ProtectedRoutes = ({ children }) => {
  const currentUser = useSelector(state => state.user.currentUser);
  const isAuthLoading = useSelector(state => state.user.isAuthLoading);

  // 认证状态未校验完成，渲染加载内容
  if (isAuthLoading) {
    return <div className="global-loading">认证信息加载中...</div>; // 可替换为自定义loading组件
  }

  // 认证完成且未登录，跳转登录页
  if (!currentUser) {
    return <Navigate to="/auth" replace />;
  }

  // 已登录，渲染受保护路由内容
  return children;
};

注意：原代码中跳转路径写为相对路径"auth"，建议改为绝对路径"/auth"，避免嵌套路由场景下跳转地址错误。

3. 调整认证监听器的状态更新逻辑 #

在onAuthStateChanged回调拿到用户信息后，同步更新用户数据、关闭加载状态：

useEffect(() => {
  const unsubscribe = onAuthStateChangedListener(async (user) => {
    if (user) {
      // 等待Firestore用户文档创建完成再更新状态，避免数据不一致
      await createUserDocumentFromAuth(user);
    }
    dispatch(setCurrentUser(user));
    // 标记认证流程完成
    dispatch(setAuthLoading(false));
  });

  return unsubscribe;
}, [dispatch]);

你提供的Firebase工具代码里有一处拼写错误，会导致Google登录时不弹出账号选择框：

// 原代码写错了属性名，propmt 改为 prompt
provider.setCustomParameters({
  prompt: 'select_account',
});

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