Vue3+Vite项目中结合HMR正确初始化Firestore的方法

问题场景 #

在基于Vue 3、Vite并启用HMR的开发项目中，每次保存文件触发热更新时，都会抛出Firebase错误：

FirebaseError: initializeFirestore() has already been called with different options. To avoid this error, call initializeFirestore() with the same options as when it was originally called, or call getFirestore() to return the already initialized instance.

当前使用的Firebase初始化代码如下：

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
export const db = initializeFirestore(firebaseApp, {
  localCache: memoryLocalCache(),
  experimentalForceLongPolling: true,
});

排查后怀疑HMR重载时Firestore实例未被销毁，但尝试使用getFirestore未解决问题。

解决方案 #

方法1：检查并复用已存在的实例 #

修改Firebase初始化代码，优先复用已存在的App和Firestore实例，仅在首次执行时完成初始化：

import { initializeApp, getApp, getApps } from "firebase/app";
import { initializeFirestore, getFirestore } from "firebase/firestore";

const firebaseConfig = { /* 你的Firebase配置 */ };

// 复用已初始化的Firebase App
const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();

// 尝试获取已存在的Firestore实例，失败时再初始化
let db;
try {
  db = getFirestore(firebaseApp);
} catch {
  db = initializeFirestore(firebaseApp, {
    localCache: memoryLocalCache(),
    experimentalForceLongPolling: true,
  });
}

export { db };

HMR重载时模块会重新执行，但Firebase的全局实例池不会被清空，通过getApps()和try/catch可以避免重复初始化。

方法2：配置Vite排除Firebase模块的HMR #

在vite.config.js中设置HMR排除Firebase核心模块，避免热更新时重载这些模块：

export default defineConfig({
  // ...其他Vite配置
  server: {
    hmr: {
      exclude: ['firebase/app', 'firebase/firestore'],
    },
  },
});

这样Firebase的初始化代码只会执行一次，热更新时不会重新触发初始化逻辑。

方法3：全局挂载Firebase实例 #

在项目入口文件（如main.js）中完成Firebase初始化，并将实例挂载到Vue全局对象，组件中直接复用该实例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { initializeApp } from 'firebase/app';
import { initializeFirestore } from 'firebase/firestore';

const firebaseConfig = { /* 你的配置 */ };
const firebaseApp = initializeApp(firebaseConfig);
const db = initializeFirestore(firebaseApp, {
  localCache: memoryLocalCache(),
  experimentalForceLongPolling: true,
});

const app = createApp(App);
// 挂载到Vue全局（选项式API可用this.$db访问）
app.config.globalProperties.$db = db;

// 组合式API可通过inject获取，需先提供
app.provide('db', db);

app.mount('#app');

组件中使用组合式API时：

import { inject } from 'vue';

const db = inject('db');

这种方式让初始化逻辑只在项目启动时执行一次，完全避开HMR带来的重复初始化问题。

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