如何在JavaScript中接入Firestore并解决db.collection不是函数的报错

错误原因 #

你使用的是 Firebase 9+ 的模块化 Web API，该版本取消了旧版命名空间模式下的db.collection()链式调用语法，同时你的getFirestore初始化缺少必填的app实例参数，两个问题共同导致了报错。

修复步骤 #

• 补全getFirestore的入参，传入初始化完成的 Firebase app 实例
• 从Firestore包中额外导入需要的模块化工具方法：collection、query、where、onSnapshot
• 将原有链式查询逻辑改为模块化API的调用方式

修正后完整代码 #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getFirestore, collection, query, where, onSnapshot } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js";

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

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// 补全app实例参数
const db = getFirestore(app);   

// 模块化构造查询条件
const userQuery = query(
  collection(db, "users"), 
  where("uid", "==", "1234")
);

// 监听查询快照
onSnapshot(userQuery, (snapshot) => {
    snapshot.docChanges().forEach((change) => {
        console.log("change ", change.doc.data());
    });
});

兼容旧版写法可选方案 #

如果不想修改原有代码逻辑，可使用兼容版SDK，将导入路径的SDK文件名后缀加上-compat即可，示例：
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js";
兼容版支持旧版的链式调用语法，但体积大于模块化API，更推荐优先使用标准模块化写法。

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