Firestore模拟器无法写入数据求助（React+Firebase环境）

我用Firebase + React开发应用，本地搭建了Functions、Firestore、Hosting、Auth、Storage模拟器，仅Auth功能正常——能在http://127.0.0.1:4000/auth看到注册用户。用户注册时会把名称写入Firestore，应用返回操作成功，但http://127.0.0.1:4000/firestore里看不到数据；网站端能编辑数据，但无法确认是否存入模拟器，且已确认未写入生产环境。

相关配置代码 #

firebase.js #

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: "demo-key",
        authDomain: "demo-test",
        projectId: "demo-test",
        storageBucket: "default-bucket",
        appId: "demo-appId",
      })
    : initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const functions = getFunctions(app);
export const analytics = getAnalytics(app);

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

firebase.json #

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"]
    }
  ],
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099,
      "host": "127.0.0.1"
    },
    "functions": {
      "port": 5001,
      "host": "127.0.0.1"
    },
    "firestore": {
      "port": 8080,
      "host": "127.0.0.1"
    },
    "hosting": {
      "port": 5000,
      "host": "127.0.0.1"
    },
    "storage": {
      "port": 9199,
      "host": "127.0.0.1"
    },
    "ui": {
      "enabled": true,
      "port": 4000,
      "host": "127.0.0.1"
    },
    "singleProjectMode": true
  }
}

注：firebase.json和firebase.js中切换localhost/127.0.0.1无差异。

排查建议 #

• 核对项目ID一致性：本地初始化的app使用projectId: "demo-test"，打开模拟器UI的Firestore页面，确认顶部显示的项目ID为demo-test。如果模拟器关联的是生产项目ID，会导致数据不同步。
• 检查Firestore模拟器启动状态：查看终端启动日志，确认firestore服务显示Running on 127.0.0.1:8080，无报错信息。
• 监控浏览器网络请求：注册时在浏览器控制台过滤firestore相关请求，确认请求地址为http://localhost:8080，且返回200状态码，无权限或参数错误。
• 临时放宽Firestore规则：如果规则过于严格，可能导致写入成功但无法被模拟器UI读取。可临时将firestore.rules改为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

保存后重启模拟器测试。

• 确认写入路径正确性：检查代码中Firestore写入的集合/文档路径（如users/{uid}），在模拟器UI中逐一展开对应层级，避免漏看嵌套路径。
• 清除浏览器缓存：强制刷新页面（Ctrl+F5），清除旧的Firebase连接缓存后重新测试写入操作。

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