Expo应用初始化Firebase后仍报No Firebase App [DEFAULT]错误

该错误本质是调用Firebase认证、数据库等服务时，默认的Firebase App实例还未完成初始化，结合你提供的代码，按以下步骤修复即可：

1. 修复导入顺序错误 #

你当前App.js中先导入了Login、SignUp等业务页面，再执行Firebase初始化。ES模块导入时会优先执行被导入文件的顶层代码，如果你的业务页面顶层就调用了getAuth()、getFirestore()等服务，这些代码会在initializeApp()执行前运行，直接触发报错。

修复操作： #

• 第一步：把Firebase初始化逻辑抽离为独立配置文件，在项目根目录新建firebase.config.js，代码如下：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {  
  apiKey:"AIzaSyA0ccz5NOHQE6FU8d6Ic4NA1-XwZgTPT_w",
  authDomain: "todoapp-****.firebaseapp.com",
  projectId: "todoapp-****",  
  storageBucket: "todoapp-****.appspot.com",
  messagingSenderId: "*****",
  appId: "*****", 
  measurementId: "****"
}; 

// 初始化App实例
const app = initializeApp(firebaseConfig);
// 提前初始化需要用到的服务，统一导出
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

• 第二步：调整App.js的导入顺序，把Firebase配置的导入放在所有业务模块的最前面，保证应用加载时最先执行Firebase初始化，修改后App.js开头代码如下：

// 最顶部先导入Firebase配置，确保初始化最先执行
import "./firebase.config";

// 再导入导航、业务页面等其他依赖
import Login from "./screens/Login";
import { NavigationContainer } from "@react-navigation/native"; 
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import SignUp from"./screens/SignUp";
import ResetPassword from "./screens/ResetPassword";
import ToDo from "./screens/ToDo";

const Stack = createNativeStackNavigator();

// 原有导航逻辑保持不变
export default function App() {  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="SignUp"
          component={SignUp}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ResetPassword"
          component={ResetPassword}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ToDo"
          component={ToDo}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  ); 
}

2. 修正业务页面的Firebase调用方式 #

不要在各个业务页面单独调用getAuth()、getFirestore()生成服务实例，统一从你刚才创建的firebase.config.js中导入已经初始化好的实例：

错误写法（所有页面文件中都要避免）：

import { getAuth } from "firebase/auth";
// 顶层直接调用，容易触发初始化时序问题
const auth = getAuth();

正确写法：

// 从独立配置文件导入已经初始化完成的服务实例
import { auth, db } from "../firebase.config";

// 后续直接使用auth、db实例调用对应方法即可，比如登录、增删待办等

3. 额外排查项 #

• 确保整个项目中只在firebase.config.js里调用一次initializeApp()，多文件重复初始化会导致实例冲突。
• 如果是Expo项目，执行npx expo start -c清除缓存后重启，避免旧模块缓存导致修改不生效；原生React Native项目可以执行cd ios && pod install后重新编译运行。

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