React Native中Firebase用户认证离线持久化问题求助

我用Expo开发的App需要支持离线使用，核心逻辑是：打开App先进入Login页面，通过useEffect钩子监听Auth状态，若检测到已登录用户则跳转到Home页面。这套逻辑在线状态下完全正常，但在iPhone上完全关闭App、开启飞行模式断开Wi-Fi后重新打开，App会卡在Login页面无法进行任何操作。

相关代码 #

Firebase配置文件（firebase.js） #

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// import { getAuth, initializeAuth } from "firebase/auth";
import {
  getReactNativePersistence,
  initializeAuth,
} from "firebase/auth/react-native";
import { getFirestore, enableIndexedDbPersistence } from "firebase/firestore";

import AsyncStorage from "@react-native-async-storage/async-storage";

const firebaseConfig = {...};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);

export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

Login页面的useEffect代码 #

useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      console.log("USER: " + user + " " + user?.email);
      if (user) {
        navigation.replace("Home");
      }
    });
  }, []);

问题排查与解决办法 #

1. 保留Auth状态监听，避免单次执行遗漏离线加载事件

Firebase Auth在离线时从AsyncStorage读取用户状态需要一定时间，原代码的useEffect虽然注册了监听，但未保留订阅到组件卸载，可能在Auth完成本地状态加载前，监听就已失效。

调整Login页面代码，确保监听持续生效直到组件卸载：

useEffect(() => {
  // 保存监听的取消函数
  const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
    console.log("USER: " + user + " " + user?.email);
    if (user) {
      navigation.replace("Home");
    }
  });

  // 组件卸载时取消监听，防止内存泄漏
  return unsubscribeAuth;
}, []);

这样当Auth从本地存储加载完用户状态后，回调会触发，就能正确执行页面跳转。

2. 处理Firestore持久化初始化的异常

原代码中调用enableIndexedDbPersistence但未处理Promise异常，异常可能阻塞后续操作，建议补充错误处理：

export const db = getFirestore(app);

// 初始化Firestore离线持久化并处理异常
enableIndexedDbPersistence(db)
  .catch((err) => {
    switch (err.code) {
      case 'failed-precondition':
        console.log("Firestore持久化失败：存在多标签页冲突（iOS中罕见）");
        break;
      case 'unimplemented':
        console.log("当前环境不支持Firestore持久化");
        break;
      default:
        console.log("Firestore持久化初始化出错:", err);
    }
  });

3. 确认依赖版本兼容性

确保@react-native-async-storage/async-storage、firebase、expo三者版本匹配，版本冲突可能导致离线持久化失效。可查看Firebase官方文档确认Expo环境下的推荐版本组合。

4. 离线测试注意事项

• 在线登录后，先确认AsyncStorage中已保存Auth状态（可通过AsyncStorage.getItem('firebase:authUser:' + firebaseConfig.apiKey + ':DEFAULT')查看）
• 完全关闭App后等待2-3秒再打开，给iOS系统足够时间加载本地存储
• 通过Xcode控制台查看Auth相关日志，排查是否有读取本地状态失败的错误

内容的提问来源于stack exchange，提问作者Sebastián Rubina