Vue项目运行时报firebase.firestore is not a function错误如何解决

AI 小北

2026-10-1

报错原因

你遇到的报错是因为当前安装的Firebase为9.0及以上版本，该版本重构了整体API为模块化写法，不再兼容8.x及更早版本的导入调用语法。

可选解决方案

方案1：使用兼容模式导入，无需修改原有业务逻辑
将导入语句替换为compat兼容包即可沿用你现有的代码写法，修改后的完整配置如下：

import * as firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

// firebase init - add your own config here
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};
firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const auth = firebase.auth();

export { db, auth }

方案2：使用Firebase 9+官方推荐的模块化写法，打包体积更小性能更优
完全改用新版API写法，修改后的配置如下：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

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

export { db, auth }

额外排查项

如果修改后仍有报错，可以先执行以下操作排查依赖问题：