带有 Next.js 的 Firebase 模拟器答案

【问题标题】：Firebase emulators with Next.js带有 Next.js 的 Firebase 模拟器
【发布时间】：2022-04-13 07:00:49
【问题描述】：

我正在尝试使用 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 启动，我就会收到该错误。

【问题讨论】：

你能分享所有的导入吗？你使用的是哪个版本？我只能在顶部看到 firebase 导入。
@Dharmaraj 是的。我更新了问题
您好！看起来 xxxuseEmulator 正在为同一个浏览器实例多次调用。我建议您查看讨论相同问题的post。
这能回答你的问题吗？ Firebase Firestore emulator error `Host has been set in both settings() and useEmulator(), emulator host will be used`

标签： javascript firebase google-cloud-firestore next.js

【解决方案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 会尝试多次运行该代码。此脚本将阻止您多次尝试连接到模拟器。

【讨论】：