React Native升级后调用firebase.app()触发Firebase原生模块未安装错误

错误信息 #

Error: You attempted to use a Firebase module that's not installed natively on your project by calling firebase.app().
请确保已安装npm包'@react-native-firebase/app'，已在项目中导入该包，并重新构建原生应用。

错误调用栈 #

in app
in RCTView (created by View)
in View (created by AppContainer)
in ChildrenWrapper (created by Root)
in _default (created by Root)
in Root (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in Integrity(RootComponent), js engine: hermes

背景 #

• React Native版本从0.68.4升级至0.73.4，已通过Yarn重新安装Firebase
• 已检查MainApplication.java中的Firebase配置，确认应用模块导入正确
• Firebase初始化代码（firebase.app()）逻辑无误，升级前可正常运行
• 需求：Firebase模块正常初始化，无原生模块错误，顺畅集成到升级后的项目

解决方案 #

1. 安装适配RN 0.73.4的Firebase核心包 #

React Native 0.73.x需要匹配对应版本的@react-native-firebase/app，执行以下命令安装兼容版本：

yarn add @react-native-firebase/app@latest

2. 彻底清理并重建原生项目 #

Android端

cd android && ./gradlew clean && cd ..
npx react-native run-android

iOS端

cd ios && pod deintegrate && pod install && cd ..
npx react-native run-ios

3. 验证原生配置完整性 #

Android

• 确认android/build.gradle中已添加Google仓库：

allprojects {
    repositories {
        google()
        mavenCentral()
        // 其他仓库
    }
}

• 确认android/app/build.gradle引入Firebase BOM依赖：

dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.7.0')
    implementation 'com.google.firebase:firebase-analytics'
    // 其他Firebase模块依赖
}

• 确认MainApplication.java中注册Firebase包：

import io.invertase.firebase.app.ReactNativeFirebaseAppPackage;

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new ReactNativeFirebaseAppPackage());
    return packages;
}

iOS

• 确认Podfile中开启Firebase模块化头文件：

pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true

• 确认GoogleService-Info.plist已添加到Xcode项目的目标目录中

4. 检查JS端初始化逻辑 #

在应用入口文件（如App.js）中确保Firebase先完成初始化：

import firebase from '@react-native-firebase/app';

// 若未通过原生配置自动初始化，手动传入配置
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"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

5. 清理Metro缓存 #

避免旧代码残留导致的异常：

npx react-native start --reset-cache

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