Vue项目调用Firestore读取数据报collection is not a function错误

问题原因 #

• 你当前使用的是 Firebase 9+ 模块化版本 SDK，不再支持旧版命名空间式的 db.collection() 调用语法，新旧API混用是直接触发报错的核心原因
• 初始化文件存在冗余错误逻辑：
  • 重复初始化 Firebase 实例，同一配置无需先后调用 firebase.initializeApp 和 initializeApp 两次
  • 同时导入了普通版 Firestore 和 Lite 版 Firestore 相关方法，还存在 getfirestore 拼写错误（正确应为驼峰写法 getFirestore）
  • 冗余导入了 Analytics 模块，待办类应用无数据统计需求可以直接移除

修复方案 #

第一步：修正 firebase/init.js 代码 #

这里提供普通版 Firestore 和 Lite 版两种方案，二选一即可：

方案1：使用普通版 Firestore（支持实时监听、离线缓存等完整功能）

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

const firebaseConfig = {
  // 替换为你自己的配置参数
  apiKey: "*****",
  authDomain: "*****",
  projectId: "*****",
  storageBucket: "*****",
  messagingSenderId: "*****",
  appId: "*****",
  measurementId: "*****"
};

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

export default db;

方案2：使用 Lite 版 Firestore（仅支持基础查询，包体积更小）

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
  // 替换为你自己的配置参数
  apiKey: "*****",
  authDomain: "*****",
  projectId: "*****",
  storageBucket: "*****",
  messagingSenderId: "*****",
  appId: "*****",
  measurementId: "*****"
};

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

export default db;

第二步：修正 index.vue 调用代码 #

对应你选择的Firestore版本，导入对应的模块化方法调用即可：

// 普通版Firestore用这个导入
import { collection, getDocs } from 'firebase/firestore'
// Lite版Firestore用这个导入
// import { collection, getDocs } from 'firebase/firestore/lite'
import db from '@/firebase/init'

...
created(){
    // 先调用collection方法传入db实例和集合名获取集合引用
    const smoothiesCol = collection(db, 'smoothies')
    // 调用getDocs获取查询快照
    getDocs(smoothiesCol).then(snapshot => {
      snapshot.forEach(doc => {
        // doc.id 为文档ID，doc.data()为文档内容
        console.log(doc.id, doc.data())
      })
    })
}

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