使用Firebase Firestore开发博客时遇db未定义错误求助

错误原因分析 #

出现Uncaught ReferenceError: db is not defined的核心原因有三点：

1. Firebase初始化代码混合API风格：同时使用了模块化API（import语法）和旧命名空间API（firebase.initializeApp），导致实例初始化混乱，db变量无法正确生成。
2. 模块语法未被浏览器识别：初始化文件使用export导出db，但HTML引入时未添加type="module"属性，浏览器将其当作普通脚本，导出的变量无法被其他脚本访问。
3. editor.js未正确导入db：即使初始化正确，editor.js未通过模块方式导入db，导致变量未定义。

修复步骤 #

1. 修正Firebase初始化文件（firebase.js） #

统一使用Firebase模块化API，删除旧命名空间风格代码：

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

const firebaseConfig = {
    apiKey: "AIzaSyDQaVM5xjFB-WB4IQXnupSvWOJSQdlrN00",
    authDomain: "bloggin-site-c4727.firebaseapp.com",
    projectId: "bloggin-site-c4727",
    storageBucket: "bloggin-site-c4727.appspot.com",
    messagingSenderId: "170432646256",
    appId: "1:170432646256:web:f36807db85372e1956f8b5"
};

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

export { db };

2. 修改HTML脚本引入方式 #

所有使用模块语法的脚本必须添加type="module"属性：

<!-- 引入Firebase模块化SDK -->
<script type="module" src="https://www.gstatic.com/firebasejs/10.13.0/firebase-app.mjs"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.mjs"></script>

<!-- 以模块方式引入初始化文件和editor.js -->
<script type="module" src="js/firebase.js"></script>
<script type="module" src="js/editor.js"></script>
<script src="js/home.js"></script>

3. 在editor.js中导入db #

在editor.js最顶部添加导入语句（注意路径要根据文件实际位置调整）：

import { db } from './firebase.js';

// 原editor.js剩余代码保持不变
const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');
// ... 后续代码

额外注意事项 #

• 确认文件路径正确性：如果editor.js和firebase.js都在js/目录下，./firebase.js路径正确；若不在同一目录，需调整为相对路径（如../js/firebase.js）。
• 本地开发需用服务器：浏览器对模块脚本有跨域限制，建议使用Live Server等本地服务器打开页面，避免加载失败。
• 移除冗余代码：原初始化文件中的firebase.initializeApp(firebaseConfig);必须删除，否则会触发重复初始化错误。

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