HTML/JavaScript中向Firebase写入文档时提示firebase未定义错误如何解决

你当前使用的是Firebase 9+ 模块化版本SDK，该版本彻底移除了旧版中全局可用的firebase命名空间对象，你代码中直接调用firebase.firestore()的写法属于Firebase 8及更早版本的用法，和你引入的SDK版本不兼容，因此抛出未定义错误。

• 第一步：在原有导入语句下方新增Firestore相关模块化API的导入

import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";

• 第二步：替换原有Firestore调用逻辑，改为模块化用法
  完整可运行的修复后代码如下：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";

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

// 初始化Firebase实例
const app = initializeApp(firebaseConfig);
// 初始化Firestore数据库实例
const db = getFirestore(app);

// 向books集合新增文档
addDoc(collection(db, "books"), {
  title: "Of Mice and Men",
})
.then((ref) => {
  console.log("Added doc with ID: ", ref.id);
});

如果你更习惯旧版本的链式调用写法，可以引入Firebase 9+的兼容版SDK，无需修改原有调用逻辑即可运行。

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