React项目集成Firebase 9时出现Firestore连接拒绝错误的求助

看起来你遇到的核心问题是本地Firestore模拟器未运行，或者配置端口不匹配导致的连接拒绝错误。下面是适配Firebase 9的分步解决方案：

1. 确认Firebase本地模拟器是否正在运行 #

你代码里调用了connectFirestoreEmulator，但如果模拟器没启动，必然会出现ERR_CONNECTION_REFUSED。按以下步骤操作：

• 先确保安装了Firebase CLI：

  npm install -g firebase-tools
  

• 如果还没初始化本地模拟器，在项目根目录执行：

  firebase init emulators
  

  跟着向导选择Firestore，设置端口（默认是8080，注意和你代码里的端口保持一致）。
• 启动模拟器：

  firebase emulators:start
  

  启动后查看控制台输出，确认Firestore模拟器在你指定的端口（比如8080或8090）正常运行。

2. 检查模拟器端口是否匹配 #

你的代码里写的是connectFirestoreEmulator(db, 'localhost', 8090)，但Firebase Firestore模拟器默认端口是8080。如果启动模拟器时用了默认端口，这里的端口号就错了，改成8080即可；或者在初始化模拟器时手动指定8090端口。

3. 区分开发/生产环境（避免线上误用模拟器） #

不要在生产环境启用模拟器，建议加环境判断，只在开发模式下连接模拟器：

import { initializeApp } from 'firebase/app'
import { getFirestore, connectFirestoreEmulator } from '@firebase/firestore'
const firebaseConfig = {
  // 你的项目配置...
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

// 仅在开发环境连接模拟器
if (process.env.NODE_ENV === 'development') {
  connectFirestoreEmulator(db, 'localhost', 8080); // 这里替换为你实际的模拟器端口
}

4. 临时排查：跳过模拟器直接连接云端Firestore #

如果还是有问题，可以先注释掉connectFirestoreEmulator这一行，重新运行项目。如果能正常连接云端Firestore，说明问题确实出在模拟器配置；如果还是报错，检查：

• 你的firebaseConfig是否完全匹配Firebase控制台的项目配置（特别是projectId）
• 本地网络是否正常，能否访问Firebase服务
• Firestore的安全规则是否允许读取操作（开发阶段可以临时设置为allow read, write: if true;，上线后再改回严格规则）

5. 验证Firestore规则（连接云端仍报错时） #

如果跳过模拟器后还是无法读取数据，检查Firebase控制台的Firestore规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null; // 开发阶段可临时设为true测试
    }
  }
}

开发阶段暂时开放权限测试，确认数据能正常读取后再调整为符合需求的规则。

按照上面的步骤排查，应该能解决你的连接拒绝问题。

内容的提问来源于stack exchange，提问作者Chase The Coder