React Native应用中正确配置两个Firebase项目的方法

核心问题原因 #

你遇到的Firestore连接超时，本质是多Firebase实例初始化方式错误：默认情况下initializeApp()会创建全局默认实例，直接用Web项目的配置初始化会和Android项目的实例产生冲突，导致Web项目的Firestore无法正确建立连接。必须显式创建独立的命名实例来隔离两个项目的服务。

一、多实例初始化步骤 #

1. 导入Firebase模块化API #

使用Firebase v9+的模块化语法，确保能灵活创建多实例：

import { initializeApp, getApp, getApps } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

2. 定义两个项目的配置 #

从各自的Firebase控制台提取配置信息（Android项目的配置也可以从google-services.json中对应字段复制，无需依赖原生配置文件的自动集成）：

// Android关联项目（用户管理用）的配置
const androidFirebaseConfig = {
  apiKey: "你的Android项目API_KEY",
  authDomain: "你的Android项目AUTH_DOMAIN",
  projectId: "你的Android项目PROJECT_ID",
  storageBucket: "你的Android项目STORAGE_BUCKET",
  messagingSenderId: "你的Android项目SENDER_ID",
  appId: "你的Android项目APP_ID"
};

// Web关联项目（核心业务用）的配置
const webFirebaseConfig = {
  apiKey: "你的Web项目API_KEY",
  authDomain: "你的Web项目AUTH_DOMAIN",
  projectId: "你的Web项目PROJECT_ID",
  storageBucket: "你的Web项目STORAGE_BUCKET",
  messagingSenderId: "你的Web项目SENDER_ID",
  appId: "你的Web项目APP_ID"
};

3. 创建独立的Firebase实例 #

通过指定唯一名称来区分两个实例，避免重复初始化：

// 初始化Android项目为默认实例
const androidApp = !getApps().length ? initializeApp(androidFirebaseConfig) : getApp();
// 初始化Web项目为命名实例（名称可自定义，确保唯一）
const webApp = initializeApp(webFirebaseConfig, 'web-business-project');

二、绑定对应实例的服务 #

分别从两个实例中获取Auth和Firestore服务，对应各自的业务场景：

// Android实例：用于手机号OTP、用户注册等用户管理操作
const androidAuth = getAuth(androidApp);
const androidFirestore = getFirestore(androidApp);

// Web实例：用于核心业务逻辑的Firestore操作
const webFirestore = getFirestore(webApp);

三、Mobx状态管理中的使用示例 #

在Mobx Store中直接引入对应的服务实例，隔离两个项目的操作：

import { makeAutoObservable } from "mobx";
import { androidAuth, webFirestore } from '../firebase/config';
import { signInWithPhoneNumber, RecaptchaVerifier } from 'firebase/auth';
import { collection, getDocs } from 'firebase/firestore';

class AppStore {
  verificationId = '';
  businessData = [];

  constructor() {
    makeAutoObservable(this);
  }

  // 用Android项目的Auth发送OTP
  sendPhoneOTP = async (phoneNumber) => {
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, androidAuth);
    const confirmationResult = await signInWithPhoneNumber(androidAuth, phoneNumber, recaptchaVerifier);
    this.verificationId = confirmationResult.verificationId;
  };

  // 用Web项目的Firestore获取业务数据
  fetchBusinessData = async () => {
    const snapshot = await getDocs(collection(webFirestore, 'business-collection'));
    this.businessData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  };
}

export default new AppStore();

四、连接问题额外排查点 #

如果仍出现Firestore连接超时，检查以下内容：

• Web项目Firestore安全规则：确保规则允许当前认证用户访问（比如避免allow read, write: if false;的测试规则）
• 网络权限：Android端确认AndroidManifest.xml中添加了网络权限：<uses-permission android:name="android.permission.INTERNET" />
• 服务启用状态：在Firebase控制台确认Web项目的Firestore服务已正常启用
• SDK版本：升级Firebase SDK到最新稳定版，避免旧版本的兼容性问题

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