React Native接入Firebase报500及模块无法解析问题求助

问题根因 #

你当前的问题来自三个核心错误：

• 混用了两套完全不兼容的Firebase SDK体系：Web版firebase包和React Native专属的@react-native-firebase/xxx系列包不能同时使用
• 你安装的firebase包为v9+的模块化版本，旧版全量导入import * as firebase from 'firebase'的写法已经废弃，新版本入口文件结构调整导致找不到main字段指向的index文件，触发模块解析报错
• 初始化代码存在语法问题：initializeApp、getAnalytics方法未提前导入，导出语句拆分两行存在拼写错误

解决方案（二选一即可） #

方案1：使用React Native专属@react-native-firebase套件（推荐，原生支持更完善） #

• 先卸载错误安装的Web版firebase包：
  npm uninstall firebase
• 安装所需依赖：
  npm install @react-native-firebase/app @react-native-firebase/auth
  iOS端还需要进入ios目录执行pod install完成原生依赖安装
• 前往Firebase控制台下载对应安卓端的google-services.json、iOS端的GoogleService-Info.plist配置文件，放到对应平台的工程目录下，这套SDK会自动读取配置，不需要在JS代码中写入firebaseConfig
• 登录功能示例代码：

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

const handleSignIn = (email, password) => {
  auth()
    .signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      console.log('登录成功', userCredential.user);
    })
    .catch((error) => {
      console.log('登录错误', error.code, error.message);
    });
};

方案2：使用Web版firebase SDK（适合轻量场景，无需原生配置） #

• 保留firebase依赖，改用v9+版本的模块化写法，正确的配置文件代码如下：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "your-key-here",
  authDomain: "your-name-here.firebaseapp.com",
  projectId: "your-id-here",
  storageBucket: "your-name-here.appspot.com",
  messagingSenderId: "0000000000",
  appId: "000000000",
  measurementId: "G-XXXXXXXXXXX"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

• 登录功能示例代码：

import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from './你的firebase配置文件路径';

const handleSignIn = (email, password) => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log('登录成功', userCredential.user);
    })
    .catch((error) => {
      console.log('登录错误', error.code, error.message);
    });
};

500错误排查 #

解决模块报错后如果仍返回500错误，请按顺序排查：

• 确认Firebase控制台的Email/Password登录方式已经开启
• 确认firebaseConfig内的所有参数和控制台生成的内容完全一致
• 确认Firebase控制台的安全规则没有拦截当前请求，测试阶段可以暂时放开auth相关的规则限制
• 确认传入的登录参数格式合法，比如邮箱格式正确、密码长度符合要求

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