Uncaught ReferenceError: firebase未定义 - 表单连Firebase数据库报错求助

我正在制作一个简单的读书论坛页面作为期末学校项目，仅使用HTML、JavaScript和CSS。刚接触后端，刚在Google Firebase中设置了云数据库。跟着教程尝试将输入表单连接到数据库，但教程使用的是Firebase 8.2.1版本，而我使用的是9.14.0版本。已按Firebase设置步骤在HTML中初始化了Firebase，但调用firebase.firestore()时，Edge调试器中出现错误：Uncaught ReferenceError: firebase is not defined。

原HTML代码 #

<div class="form_card">
    <form id="submit_form">
        <div class="inputBox">
            <input type="text" id="title" required="required" autocomplete="off">
            <span>Title</span>
        </div>

        <div class="inputBox">
            <input type="text" id="review" required="required" autocomplete="off">
            <span>Review</span>

            <button type="submit" id="post_btn"><p>POST</p></button>
        </div>
    </form>
</div>

<script src="form.js" type="module"></script>

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
    // Your web app's Firebase configuration
    const firebaseConfig = {
        apiKey: "AIzaSyB7ZiJKzHTsgJ3sv8QsOHPLnWCqqnGSSJ0",
        authDomain: "litary-project.firebaseapp.com",
        projectId: "litary-project",
        storageBucket: "litary-project.appspot.com",
        messagingSenderId: "147018135042",
        appId: "1:147018135042:web:eb4d3d5e9dcb79d89bd91b"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const db = firebase.firestore();    // 报错位置
</script>

原JavaScript代码（form.js） #

var titleVal = document.getElementById('title');
var reviewVal = document.getElementById('review');

const btn = document.getElementById('post_btn');

btn.addEventListener('click', function handleClick(e) { //Listen to click
  
    e.preventDefault();

    const inputs = document.querySelectorAll('#title, #review');
    
      console.log(titleVal.value);
      console.log(reviewVal.value);

    inputs.forEach(input =>{
      input.value = '';
    });
});

解决方案 #

Firebase 9.x采用模块化导入的设计，不再依赖全局的firebase对象，所有功能都需要单独导入对应的函数。

1. 修改Firebase初始化代码

需要导入getFirestore函数，并用它来初始化数据库实例：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
    // 新增导入getFirestore函数
    import { getFirestore } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";

    const firebaseConfig = {
        apiKey: "AIzaSyB7ZiJKzHTsgJ3sv8QsOHPLnWCqqnGSSJ0",
        authDomain: "litary-project.firebaseapp.com",
        projectId: "litary-project",
        storageBucket: "litary-project.appspot.com",
        messagingSenderId: "147018135042",
        appId: "1:147018135042:web:eb4d3d5e9dcb79d89bd91b"
    };

    const app = initializeApp(firebaseConfig);
    // 使用getFirestore初始化数据库，替代原有的firebase.firestore()
    const db = getFirestore(app);

    // 如果需要在form.js中使用db，可以挂载到window对象（适合小型项目）
    window.db = db;
</script>

2. 修改form.js，添加数据写入逻辑

如果要把表单数据写入Firestore，需要导入addDoc和collection函数，并使用全局挂载的db：

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

var titleVal = document.getElementById('title');
var reviewVal = document.getElementById('review');

const btn = document.getElementById('post_btn');

btn.addEventListener('click', async function handleClick(e) {
    e.preventDefault();

    const title = titleVal.value.trim();
    const review = reviewVal.value.trim();

    if (title && review) {
        try {
            // 写入数据到"book_reviews"集合
            await addDoc(collection(window.db, "book_reviews"), {
                title: title,
                review: review,
                createdAt: new Date()
            });
            console.log("数据提交成功！");
            
            // 清空输入框
            const inputs = document.querySelectorAll('#title, #review');
            inputs.forEach(input => {
                input.value = '';
            });
        } catch (error) {
            console.error("提交失败：", error);
        }
    } else {
        console.log("标题和评论不能为空");
    }
});

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