使用 Next.js 的 Firebase 模拟器

Question

我正在尝试使用 Next.js 设置 Firebase 的 V9 模拟器，但没有成功。我总是收到这个错误

我的 firebase 版本是9.1.1.

我的 Firebase 设置如下所示：

import { initializeApp, FirebaseApp } from "firebase/app";
import { initializeApp, FirebaseApp } from "firebase/app";
import firebase from "firebase/compat/app";
import { getAuth, connectAuthEmulator, Auth } from "firebase/auth";
import {
  getFirestore,
  connectFirestoreEmulator,
  Firestore,
} from "firebase/firestore";
import {
  getStorage,
  connectStorageEmulator,
  FirebaseStorage,
} from "firebase/storage";
import {
  getDatabase,
  connectDatabaseEmulator,
  Database,
} from "firebase/database";

let firebaseApp: FirebaseApp;
let auth: Auth;
let firestore: Firestore;
let storage: FirebaseStorage;
let db: Database;

if (!firebase.apps.length) {
  firebaseApp = initializeApp(clientCredentials);
  auth = getAuth(firebaseApp);
  firestore = getFirestore(firebaseApp);
  storage = getStorage(firebaseApp);
  db = getDatabase(firebaseApp);
}

if (IS_DEV) {
  connectFirestoreEmulator(firestore, "localhost", 8080);
  connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true });
  connectDatabaseEmulator(db, "localhost", 9000);
  connectStorageEmulator(storage, "localhost", 9199);
}

export { firebaseApp, auth, firestore, storage, db }

我已确保没有调用我的 firestore 对象。Next.js 一旦启动，我就会收到该错误。

Answer 1

这是由于全局命名空间值和 NextJs 运行时而发生的。

您可以按如下方式修复此问题：

const EMULATORS_STARTED = 'EMULATORS_STARTED';
function startEmulators() {
  if (!global[EMULATORS_STARTED]) {
    global[EMULATORS_STARTED] = true;
    connectFunctionsEmulator(functions, 'localhost', 5001);
    connectFirestoreEmulator(db, 'localhost', 8080);
    connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true });
    connectDatabaseEmulator(db, "localhost", 9000);
    connectStorageEmulator(storage, 'localhost', 9199);
  }
}

Firebase 在启动后会添加一个全局命名空间“EMULATORS_STARTED”，并且 NextJs 会尝试多次运行该代码。该脚本将阻止您多次尝试连接到模拟器。