无法连接本地 Firebase 模拟器套件托管与 Firestore（Web 版本 9）

Question

我正在尝试使用 firebase 本地模拟器套件测试我的应用程序，该套件使用托管、Firestore 和云功能。

我使用以下代码为本地模拟器设置我的应用程序，参考https://firebase.google.com/docs/emulator-suite/connect_firestore#web-version-9中的说明。

import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { initializeApp } from "firebase/app";
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
connectFirestoreEmulator(db, 'localhost', 8080);

然后我可以使用以下命令启动我的本地模拟器而没有错误

firebase emulators:start --project demo-<PROJECT_ID>

将 <PROJECT_ID> 和 <LOCAL_DIR> 替换为我的实际项目 ID 和本地目录。

终端output：

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
i  emulators: Detected demo project ID <PROJECT_ID>, emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
+  functions: Using node@14 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: build
+  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "<LOCAL_DIR>" for Cloud Functions...
+  functions[us-central1-makeUppercase]: firestore function initialized.
+  functions[us-central1-onCreateEntry]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5000 │ n/a                             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

但是，当我尝试通过我在本地模拟器中托管的应用程序创建新的 Firestore 文档时，我的 Firestore 本地模拟器中没有显示任何内容。 我的浏览器控制台也没有出现任何错误。

我能够手动创建新文档并在 Firestore 本地模拟器中与我的 Cloud Functions 本地模拟器通信。 没问题。 只有当我尝试通过我的应用程序与 Firestore 通信时才会遇到问题。

我错过了什么？ 非常感谢您的帮助！

Answer 1

我有类似的问题，这是我在我的 React 应用程序中使用的 firebase.js。

import { initializeApp } from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import { getAuth, connectAuthEmulator } from 'firebase/auth';
import {
  getFirestore,
  connectFirestoreEmulator,
} from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_BASEURL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore();

if (process.env.REACT_APP_TARGET.toUpperCase() === 'DEVELOPMENT') {
  connectAuthEmulator(
    auth,
    process.env.REACT_APP_EMULATOR_HOST + '/',
  );
  connectFirestoreEmulator(db, 'localhost', '8080');
}

export { auth, db, firebaseConfig };
export default app;