Firebase V9模拟器配合Next.js配置启动报错求助

问题原因 #

你遇到的报错核心是Firebase服务实例重复连接模拟器，结合你给出的代码和Next.js的运行特性，具体根因有3个：

• 代码存在冗余重复导入：你重复导入了2次initializeApp，虽然不直接报错，但属于无效代码
• 初始化判断逻辑失效：你混用了Compat版本和模块化版本的Firebase API，用firebase.apps.length（Compat包的实例管理属性）判断模块化API初始化的实例，二者的实例池互相独立，该判断完全不生效，会导致Next.js开发热重载、服务端/客户端双端运行时重复创建Firebase服务实例
• 模拟器连接无防重复校验：没有判断对应服务是否已经连接过模拟器，只要代码被多次执行，就会重复调用connectFirestoreEmulator等方法直接触发报错

注意：该报错仅与connectFirestoreEmulator方法重复执行有关，和你是否调用Firestore的读写接口没有关联。

修复方案 #

步骤1：调整代码逻辑 #

删除冗余导入，移除不必要的Compat包引入，改用模块化方式判断实例是否存在，同时新增模拟器连接的防重复校验，修改后的代码如下：

import { initializeApp, FirebaseApp, getApp, getApps } from "firebase/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;

// 改用模块化API的getApps判断实例是否存在，兼容Next.js服务端/客户端双端运行、热重载场景
if (!getApps().length) {
  firebaseApp = initializeApp(clientCredentials);
} else {
  firebaseApp = getApp();
}

auth = getAuth(firebaseApp);
firestore = getFirestore(firebaseApp);
storage = getStorage(firebaseApp);
db = getDatabase(firebaseApp);

// 若你自定义了IS_DEV常量也可以替换此处的判断条件
if (process.env.NODE_ENV === 'development') {
  // 新增模拟器连接校验，仅未连接时才执行连接操作
  if (!auth.emulatorConfig) {
    connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true });
  }
  if (!firestore._settingsFrozen) {
    connectFirestoreEmulator(firestore, "localhost", 8080);
  }
  if (!db.emulatorConfig) {
    connectDatabaseEmulator(db, "localhost", 9000);
  }
  if (!storage.emulatorConfig) {
    connectStorageEmulator(storage, "localhost", 9199);
  }
}

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

步骤2：验证修复效果 #

重启Next.js开发服务即可，此时无论热重载多少次、服务端和客户端各执行一次初始化逻辑，都不会重复连接模拟器触发报错。

内容的提问来源于stack exchange，提问作者Martin Nordström