Firebase数据无法显示到HTML页面，提示readData未定义

问题场景 #

作为数据库新手，尝试将Firebase Firestore中的数据渲染到HTML页面，点击按钮后无任何内容显示，控制台抛出错误：

Uncaught ReferenceError: readData is not defined
at HTMLButtonElement.onclick (profili:82:32)

代码分析 #

核心问题出在ES模块的作用域隔离：你的readData函数定义在type="module"的<script>标签内，ES模块的变量和函数默认不会暴露到全局作用域。而HTML按钮的onclick="readData()"是在全局作用域中查找该函数，自然找不到，导致报错。

现有代码片段 #

JS代码

<script defer src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>

<script type="module">
    const firebaseConfig = {
        apiKey: "AIzaSyD2dGlAuA0zPpSGlYkCAFsPM8bsoWaRV44",
        authDomain: "app.firebaseapp.com",
        projectId: "app",
        storageBucket: "app.appspot.com",
        messagingSenderId: "966901972374",
        appId: "1:966901972374:web:663a1b6fc7324c4021b1b7",
        measurementId: "G-CD22ET3FG6"
    };

    const app = firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();
    
    function readData() {
        var dataContainer = document.getElementById('data-container');
        var productsRef = db.collection("products");
        
        productsRef.get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                var data = doc.data();
                var item = document.createElement('div');
                item.innerHTML = 'Description: ' + data.description + ', Name: ' + data.name + ', Price: ' + data.price; 
                dataContainer.appendChild(item);
            });
        });
    };
</script>

HTML代码

<body>
  <div id="data-container"></div>
  <button onclick="readData()">Read Data</button>
</body>

Firestore规则

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

解决方案 #

提供两种可行方案，任选其一即可：

方案1：将函数暴露到全局作用域 #

在模块内把readData挂载到window对象上，让全局作用域可以访问：

// 在模块的最后添加
window.readData = readData;

修改后的完整JS模块代码：

<script type="module">
    const firebaseConfig = {
        // 你的配置信息
    };

    const app = firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();
    
    function readData() {
        // 原函数逻辑不变
    };

    // 暴露到全局
    window.readData = readData;
</script>

方案2：使用事件监听器替代onclick属性 #

移除HTML按钮的onclick属性，在模块内通过代码绑定点击事件：

修改后的HTML

<body>
  <div id="data-container"></div>
  <button id="read-btn">Read Data</button>
</body>

修改后的JS模块代码

function readData() {
    // 原函数逻辑不变
};

// 添加事件监听器
document.getElementById('read-btn').addEventListener('click', readData);

额外提示 #

• 你的Firestore规则设置为允许所有读写操作，测试环境可以使用，生产环境建议修改为更严格的权限控制。
• 当前使用的Firebase版本（7.14.5）较旧，如有需求可以考虑升级到最新稳定版，但上述解决方案不受版本影响。

内容的提问来源于stack exchange，提问作者Jurij Petrov