React Native重启后Firebase Auth用户状态丢失问题求助

问题分析 #

重启应用后Firebase Auth用户状态变为undefined，本质是Firebase未正确从本地缓存恢复用户会话，或是组件在Auth状态加载完成前就提前渲染了登录导航栈。结合你的代码，主要问题集中在Firebase初始化时机、Auth状态加载的处理逻辑以及持久化配置上。

解决方案 #

1. 确保Firebase尽早初始化并配置持久化 #

在应用入口文件（如App.js或index.js）顶部完成Firebase初始化，避免在组件/hook中延迟初始化，并明确设置本地持久化：

// App.js 顶部
import { initializeApp } from 'firebase/app';
import { getAuth, setPersistence, browserLocalPersistence } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const firestore = getFirestore(app);

// 设置本地持久化，确保会话保存到设备
setPersistence(auth, browserLocalPersistence)
  .catch(error => console.error("Auth持久化配置失败:", error));

2. 修改useAuth Hook，区分加载状态与登出状态 #

初始状态设为null，用来标识Auth状态还未加载完成，避免将“未加载”误判为“已登出”：

// useAuth.ts
import React, { useEffect } from "react";
import { User, onAuthStateChanged } from "firebase/auth";
import { auth } from "../App"; // 导入全局初始化的auth实例

export function useAuth() {
  const [user, setUser] = React.useState<User | null>(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user); // 有值表示登录，null表示登出
    }, (error) => {
      console.error("Auth状态变更错误:", error);
      setUser(null);
    });

    return unsubscribe;
  }, []);

  return {
    user,
    isLoading: user === null, // 新增加载状态标识
  };
}

3. 优化RootNavigation，等待Auth状态加载完成 #

在Auth状态未加载完成时显示加载组件，避免过早渲染登录栈：

// 根导航组件
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { useAuth } from '../hooks/useAuth';
import { doc, getDoc } from 'firebase/firestore';
import { firestore } from '../App'; // 导入全局firestore实例

import FinderStack from './FinderStack';
import DonorStack from './DonorStack';
import AuthStack from './AuthStack';

export default function RootNavigation() {
    const { user, isLoading } = useAuth();
    const [isFinder, setIsFinder] = useState(false);
    const [isDonor, setIsDonor] = useState(false);

    useEffect(() => {
        const fetchUserType = async () => {
            if (user) {
                try {
                    const userDoc = await getDoc(doc(firestore, 'users', user.uid));
                    if (userDoc.exists()) {
                        const userData = userDoc.data();
                        setIsFinder(userData.isFinder);
                        setIsDonor(userData.isDonor);
                    } else {
                        console.log('用户文档不存在');
                    }
                } catch (error) {
                    console.error('获取用户文档失败:', error);
                }
            } else {
                // 用户登出时重置类型状态
                setIsFinder(false);
                setIsDonor(false);
            }
        };

        fetchUserType();
    }, [user]);

    // Auth状态未加载完成时显示加载动画
    if (isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" />
            </View>
        );
    }

    if (user) {
        if (isFinder) {
            return <FinderStack />;
        } else if (isDonor) {
            return <DonorStack />;
        }
        // 用户类型未加载完成时继续显示加载
        return <ActivityIndicator size="large" />;
    } else {
        return <AuthStack />;
    }
}

4. 移除冗余的AsyncStorage存储 #

Firebase Auth已经自动处理会话持久化，无需手动存储loginStatus和userType，删除登录组件中相关代码：

// 登录组件中删除以下代码
AsyncStorage.setItem('userType', 'finder');
AsyncStorage.setItem('loginStatus', 'true');
// 以及 donor 分支的对应代码

额外检查项 #

• 确认Firebase SDK版本与React Native版本兼容，建议使用最新稳定版
• 检查设备是否禁用了本地存储（如隐私模式或存储空间不足）
• 确保用户登录时没有调用signOut或清除Auth缓存的代码

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