Firebase CDN接入JS文件遇报错：db.collection不是函数该如何解决？

这个问题的根源很明确——你混淆了Firebase Analytics和Firestore的初始化逻辑，同时还缺少了Firestore对应的CDN SDK依赖。让我一步步帮你修复：

1. 缺少Firestore SDK引入 #

你当前只加载了Firebase核心库和Analytics库，但要使用Firestore的collection方法，必须额外引入Firestore的SDK脚本。在现有的Firebase脚本后面添加这一行：

<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>

注意要保持SDK版本和其他Firebase库一致（这里是7.0.0），避免版本不兼容问题。

2. 错误的db变量初始化 #

你把firebase.analytics()的实例赋值给了db，但Analytics是用来做数据统计的工具，它根本没有collection方法。你需要把db初始化为Firestore实例：

// 替换原来的 const db = firebase.analytics();
const db = firebase.firestore();

修正后的完整Firebase代码段 #

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<!-- 新增Firestore SDK -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
  authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
  databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
  projectId: "udemy-modern-javascript-cee40",
  storageBucket: "udemy-modern-javascript-cee40.appspot.com",
  messagingSenderId: "941299603483",
  appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
  measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 初始化Firestore实例
const db = firebase.firestore();
// 如果仍需要使用Analytics，可以单独初始化
const analytics = firebase.analytics();
</script>

为什么会报错？ #

你之前的db是Analytics对象，调用db.collection()时，因为这个对象没有该方法，所以浏览器抛出了Uncaught TypeError: db.collection is not a function的错误。修正上述两个点后，你的JS文件代码就能正常调用Firestore的方法了。

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