Expo React Native应用重载时Firebase用户自动登出问题求助

核心原因 #

Firebase Auth 在 Expo 开发环境下的状态持久化可能未正确配置，或者组件初始化时的同步检查过早，导致重载后无法恢复用户状态。

解决方案 #

1. 显式设置 Firebase Auth 持久化 #

在你的 Firebase 初始化文件（../firebase）中添加本地持久化配置，确保用户状态在重载后不会丢失：

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

// 你的 Firebase 配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  // 其他配置项
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 强制设置本地持久化
setPersistence(auth, browserLocalPersistence)
  .catch(err => console.error("持久化配置失败:", err));

export { auth };

2. 优化 Auth 状态监听逻辑 #

你的 Login 组件中，初始的 auth.currentUser 同步检查会因为 Firebase 状态恢复是异步操作而返回 null，应该完全依赖 onAuthStateChanged 的回调：

修改 Login 组件的 useEffect：

useEffect(() => {
  const subscriber = onAuthStateChanged(auth, user => {
    if (user) {
      navigation.navigate("Root");
    }
  });

  return subscriber;
}, [navigation]);

移除原代码中一开始的 if (auth.currentUser) 判断，让异步回调来处理用户状态的变化。

3. 处理 Expo 热重载的影响 #

Expo 的热重载（Fast Refresh）可能导致 Auth 状态丢失，尝试：

• 完全重启 Expo 模拟器（而非仅热重载）
• 开发时使用完全刷新（Ctrl+R / Cmd+R）代替热重载

4. 确保 Firebase 初始化时机正确 #

在 App 最顶层（比如 App.js）先导入并初始化 Firebase，避免组件加载延迟导致状态恢复不及时：

// App.js 顶部
import './firebase'; 
import { NavigationContainer } from '@react-navigation/native';
// 其他组件导入

5. 验证 Root 组件的用户状态 #

在 Root 组件中添加监听，确认重载后用户状态是否正常恢复：

// Root 组件
import { auth } from '../firebase';
import { useEffect } from 'react';

export function Root({ navigation }) {
  useEffect(() => {
    const subscriber = onAuthStateChanged(auth, user => {
      console.log("当前用户:", user);
      if (!user) {
        navigation.navigate('Login');
      }
    });

    return subscriber;
  }, [navigation]);

  // 组件其余代码
}

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