React Native安装Firebase连接时报500及模块无法解析问题求助

问题根因 #

你遇到的模块解析错误是Firebase v9+版本默认采用ESM模块化架构，React Native自带的Metro打包器默认未配置对.cjs后缀文件的解析规则导致的。同时你使用了旧版Firebase的链式调用语法，缺少对应compat依赖导入也会引发运行时错误。

修复步骤 #

• 补全依赖导入：你当前仅导入了compat基础包，使用Realtime Database需要额外导入对应的compat包，同时可以删除无用的模块化API导入

// 删除无用的 import { initializeApp } from 'firebase/app'
import firebase from 'firebase/compat/app'
import 'firebase/compat/database'

• 配置Metro解析规则：在项目根目录新建/修改metro.config.js，添加对.cjs文件的解析支持

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'cjs'),
    sourceExts: [...defaultConfig.resolver.sourceExts, 'cjs'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

• 补全配置参数：你代码中firebaseConfig的databaseURL字段为空，需要前往Firebase控制台的Realtime Database页面复制完整的数据库URL填入，否则后续数据库调用会报错。
• 清除缓存重启服务：执行以下命令重启开发服务避免缓存影响

npx react-native start --reset-cache

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