使用Firebase Firestore开发博客网站提示db未定义如何解决

问题根源 #

• 你的script标签同时配置了src="js/editor.js"和内部的Firebase初始化代码，浏览器会直接忽略内部代码，仅执行src指向的外部JS文件，db变量从始至终没有被定义。
• 你引入的是Firebase 9.x的模块化版本，但使用的是Firebase 8.x的命名空间式语法（firebase.xxx），这类写法在v9默认版本中不生效。
• 所有带type="module"的script标签内的变量都是模块私有变量，不会自动挂载到全局作用域，就算你正确初始化了db，editor.js里也无法直接访问。

解决方案 #

第一步：修改HTML中的Firebase初始化代码 #

拆分script标签，修正Firebase v9的初始化写法，同时将db挂载到全局作用域：

<!-- 初始化Firebase -->
<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";
  import { getFirestore } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js";

  const firebaseConfig = {
    apiKey: "AIzaSyBbHBS9rdHrbP6g7BG4_kPP9XV1vCiVewU",
    authDomain: "blog-web-49668.firebaseapp.com",
    projectId: "blog-web-49668",
    storageBucket: "blog-web-49668.appspot.com",
    messagingSenderId: "561111016179",
    appId: "1:561111016179:web:eef336738659e3fbfb0d86",
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  // 将db挂载到全局，方便editor.js访问
  window.db = db;
</script>
<!-- 单独引入editor.js -->
<script type="module" src="js/editor.js"></script>

注：Firebase 9已经默认开启timestampsInSnapshots配置，不需要手动设置。

第二步：修改editor.js中的Firestore操作代码 #

换成Firebase 9的模块化API写法：

// 顶部先引入需要的方法
import { collection, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js";

publishBtn.addEventListener('click', () => {
    if (articleField.value.length && blogTitleField.value.length) {
        // 生成id 
        let letters = 'abcdefghijklmnopqrstuvwxyz';
        let blogTitle = blogTitleField.value.split("-").join("-");
        let id = '';
        for (let i = 0; i < 4; i++) {
            id += letters[Math.floor(Math.random() * letters.length)];
        }

        // 设置文档名
        let docName = `${blogTitle}-${id}`;
        let date = new Date(); // 存储发布时间信息

        // 替换原有的db操作代码
        setDoc(doc(collection(window.db, "blogs"), docName), {
            title: blogTitleField.value,
            article: articleField.value,
            bannerImage: bannerPath,
            publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
        })
        .then(() => {
            console.log('数据写入成功');
        })
        .catch((err) => {
            console.error(err);
        });
    }
})

内容的提问来源于stack exchange，提问作者Jona.h