Expo中Firebase Auth持久化不符合预期问题排查

核心问题 #

你遇到的刷新后丢失用户状态的问题，主要源于initializeAuth的重复调用风险，以及React Native中AsyncStorage初始化时机滞后于Auth初始化的问题。Firebase规定initializeAuth只能执行一次，若因模块重复加载导致多次调用，会直接破坏持久化的用户状态；同时如果Auth初始化时AsyncStorage还未就绪，也无法读取已保存的登录信息。

修复步骤 #

1. 确保Auth实例仅初始化一次
   修改firebaseConfig.js，通过捕获错误的方式避免重复调用initializeAuth：

   import { initializeApp } from "firebase/app";
   import { initializeAuth, getAuth } from "firebase/auth";
   import { getReactNativePersistence } from "firebase/auth/react-native";
   import { AsyncStorage } from "@react-native-async-storage/async-storage";
   import { getFirestore } from "firebase/firestore";
   
   const firebaseConfig = {...};
   
   export const app = initializeApp(firebaseConfig);
   
   // 避免重复初始化Auth实例
   let authInstance;
   try {
     // 尝试获取已存在的Auth实例
     authInstance = getAuth(app);
   } catch (error) {
     // 实例不存在时，执行初始化
     authInstance = initializeAuth(app, {
       persistence: getReactNativePersistence(AsyncStorage)
     });
   }
   
   export const auth = authInstance;
   export const db = getFirestore(app);
   

2. 延迟Auth状态监听，确保AsyncStorage就绪
   在App.js中先等待AsyncStorage完成初始化，再启动Auth状态监听：

   import { useEffect, useState } from 'react';
   import { AsyncStorage } from '@react-native-async-storage/async-storage';
   import { auth } from './firebaseConfig';
   import { onAuthStateChanged } from "firebase/auth";
   
   export default function App() {
     const [isAppReady, setIsAppReady] = useState(false);
   
     useEffect(() => {
       const initApp = async () => {
         // 触发AsyncStorage初始化
         await AsyncStorage.getItem('@dummy_key');
         setIsAppReady(true);
       };
       initApp();
     }, []);
   
     useEffect(() => {
       if (!isAppReady) return;
   
       const unsubscribe = onAuthStateChanged(auth, user => {
         if (user) {
           // 处理已登录逻辑
         } else {
           console.log("No user");
         }
       });
       return unsubscribe;
     }, [isAppReady]);
   
     if (!isAppReady) {
       return null; // 可替换为自定义加载组件
     }
   
     // 渲染应用主内容
     return (...);
   }
   

3. 验证依赖与版本

   • 确认已正确安装@react-native-async-storage/async-storage，React Native 0.60+版本无需手动链接
   • 升级Firebase SDK到最新稳定版，旧版本可能存在React Native持久化相关bug

额外提示 #

测试时避免使用模拟器的"快速刷新"功能，该功能会重置模块状态，导致Auth实例重新初始化，干扰持久化状态的读取。

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