React Native中Firebase用户无法持久化问题求助

核心错误点 #

1. useEffect 依赖数组错误 #

你的Auth Hook中，useEffect的依赖数组包含了user，这会导致每次user状态更新时，都会取消之前的onAuthStateChanged订阅并重新创建新订阅。这种重复订阅会干扰Firebase从AsyncStorage恢复用户状态的流程，甚至可能错过用户恢复的回调触发。

2. 手动设置用户状态导致的不一致 #

在authSignInAnonymously方法中，你手动调用了setUser(userCredential.user)，但onAuthStateChanged已经会自动监听用户状态变化并更新user状态。手动设置可能导致状态不同步，尤其在持久化恢复时。

3. 加载状态判断逻辑缺陷 #

在Navigator组件中，当loading为true时直接渲染PublicLayout，但此时Firebase可能还在从AsyncStorage中恢复用户状态。这会导致应用启动时短暂显示公共界面，之后才切换到私有界面，甚至可能因为恢复延迟导致停留在公共界面。

修正后的代码 #

1. 修正Auth Hook #

import { createContext, useContext, useEffect, useState } from "react";
import { FIREBASE_AUTH } from "../config/firebase";
import { onAuthStateChanged, signInAnonymously } from "firebase/auth";

const AuthContext = createContext();

export function Provider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // 仅在组件挂载时订阅一次，依赖数组设为空
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(FIREBASE_AUTH, (authUser) => {
      setUser(authUser);
      // 第一次回调触发即表示Firebase完成状态初始化，结束加载
      setLoading(false);
    });
    return unsubscribe; // 组件卸载时取消订阅
  }, []); // 移除user依赖

  const authSignInAnonymously = async () => {
    try {
      await signInAnonymously(FIREBASE_AUTH);
      // 无需手动setUser，onAuthStateChanged会自动更新
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <AuthContext.Provider
      value={{
        user,
        loading,
        authSignInAnonymously,
      }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => {
  const authContext = useContext(AuthContext);
  if (!authContext) {
    throw new Error("useAuth must be used within an AuthContextProvider");
  }
  return authContext;
};

2. 修正Navigator逻辑 #

import { NavigationContainer } from "@react-navigation/native";
import { ActivityIndicator, View } from "react-native";
import { Provider, useAuth } from "./app/hooks/useAuth";
import { PublicLayout } from "./app/layout/PublicLayout";
import { PrivateLayout } from "./app/layout/PrivateLayout";

export default function App() {
  return (
    <Provider>
      <Navigator />
    </Provider>
  );
}

const Navigator = () => {
  const { loading, user } = useAuth();

  // 加载中显示指示器，避免错误界面闪烁
  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <NavigationContainer>
      {user ? <PrivateLayout /> : <PublicLayout />}
    </NavigationContainer>
  );
};

额外检查项 #

• 确保@react-native-async-storage/async-storage已正确安装并链接（React Native 0.60+自动链接）
• 验证Firebase配置中的persistence设置无误，getReactNativePersistence(ReactNativeAsyncStorage)确实正确传入
• 测试匿名登录后，查看AsyncStorage中是否存在Firebase Auth相关的存储项（可使用AsyncStorage.getAllKeys()和AsyncStorage.multiGet()调试）

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