Google Apps Script HTML表单与Firebase连接故障排查求助

核心问题分析 #

1. Firebase v9库与旧语法不兼容：加载的是Firebase v9版本库，但代码采用的是v8及更早的命名空间式写法（firebase.initializeApp、firebase.database()），v9默认使用模块化API，直接套用旧语法会导致初始化失败。
2. Firebase安全限制未配置：Google Apps Script部署页面的域名（script.google.com、script.googleusercontent.com）未被Firebase API密钥允许访问，同时实时数据库安全规则可能限制了未授权的读写操作。
3. 代码逻辑遗漏：删除功能的复选框列表未动态生成，导致无法选择要删除的条目。

分步解决方案 #

1. 修复Firebase初始化的语法兼容问题 #

将Firebase v9库替换为兼容模式版本，适配旧写法：

<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database-compat.js"></script>

2. 配置Firebase API密钥访问限制 #

在Firebase控制台操作：

• 进入「项目设置 > API密钥」
• 找到当前使用的API密钥，点击「编辑」
• 选择「HTTP引用限制」，添加域名：script.google.com、script.googleusercontent.com
• 保存设置

3. 调整Firebase实时数据库安全规则（测试阶段） #

为快速验证连接，先设置宽松规则（上线后需改为严格权限控制）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

在Firebase控制台「实时数据库 > 规则」中更新并发布。

4. 完善代码逻辑 #

在populateFruits函数中补充删除复选框的生成逻辑，确保删除功能可用。

修正后的完整index.html代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Firebase CRUD Form</title>
    <!-- 使用Firebase v9兼容库 -->
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database-compat.js"></script>
</head>
<body>
    <h1>Firebase CRUD Form</h1>

    <form id="fruitForm">
        <label for="fruit">Select a fruit:</label>
        <select id="fruit" name="fruit"></select>

        <br><br>

        <label for="newFruit">Add a new fruit:</label>
        <input type="text" id="newFruit" name="newFruit">

        <button type="button" onclick="addFruit()">Add</button>

        <br><br>

        <label>Edit fruit:</label>
        <input type="text" id="editFruit" name="editFruit">
        <button type="button" onclick="editFruit()">Edit</button>

        <br><br>

        <label>Delete fruits:</label>
        <ul id="fruitList"></ul>

        <button type="button" onclick="deleteFruits()">Delete</button>
    </form>

    <script>
        // Initialize Firebase
        var firebaseConfig = {
            apiKey: 'XXXXXXXXXXXXXXXXX',
            authDomain: 'XXXXXXXXXXXXXXXXX',
            databaseURL: 'XXXXXXXXXXXXXXXXX',
            projectId: 'XXXXXXXXXXXXXXXXX',
            storageBucket: 'XXXXXXXXXXXXXXXXX',
            messagingSenderId: 'XXXXXXXXXXXXXXXXX',
            appId: 'XXXXXXXXXXXXXXXXX',
            measurementId: 'XXXXXXXXXXXXXXXXX'
        };
        firebase.initializeApp(firebaseConfig);

        // Get the reference to the Firebase database
        var database = firebase.database();

        // Function to dynamically populate the dropdown list and delete checkboxes
        function populateFruits() {
            var fruitSelect = document.getElementById("fruit");
            var fruitList = document.getElementById("fruitList");
            fruitSelect.innerHTML = "";
            fruitList.innerHTML = "";

            database.ref('fruits').once('value', function(snapshot) {
                snapshot.forEach(function(childSnapshot) {
                    var fruit = childSnapshot.val();
                    // Populate dropdown
                    var option = document.createElement('option');
                    option.value = fruit;
                    option.text = fruit;
                    fruitSelect.appendChild(option);
                    // Populate delete checkboxes
                    var li = document.createElement('li');
                    var checkbox = document.createElement('input');
                    checkbox.type = "checkbox";
                    checkbox.name = "fruitsToDelete";
                    checkbox.value = fruit;
                    li.appendChild(checkbox);
                    li.appendChild(document.createTextNode(fruit));
                    fruitList.appendChild(li);
                });
            }).catch(function(error) {
                console.error("加载数据失败:", error);
                alert("无法连接Firebase，请检查配置和网络");
            });
        }

        // Populate on page load
        populateFruits();

        function addFruit() {
            var newFruit = document.getElementById("newFruit").value;

            if (newFruit !== "") {
                document.getElementById("newFruit").value = "";

                database.ref('fruits').push(newFruit)
                .then(function() {
                    populateFruits();
                })
                .catch(function(error) {
                    console.error("添加失败:", error);
                    alert("添加失败，请检查Firebase配置");
                });
            }
        }

        function editFruit() {
            var selectedFruit = document.getElementById("fruit").value;
            var editedFruit = document.getElementById("editFruit").value;

            if (selectedFruit !== "" && editedFruit !== "") {
                database.ref('fruits').orderByValue().equalTo(selectedFruit).once('child_added', function(snapshot) {
                    snapshot.ref.set(editedFruit)
                    .then(function() {
                        populateFruits();
                        document.getElementById("editFruit").value = "";
                    })
                    .catch(function(error) {
                        console.error("编辑失败:", error);
                        alert("编辑失败，请检查数据");
                    });
                });
            }
        }

        function deleteFruits() {
            var checkboxes = document.getElementsByName("fruitsToDelete");
            var fruitsToDelete = [];

            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    fruitsToDelete.push(checkboxes[i].value);
                }
            }

            if (fruitsToDelete.length > 0) {
                fruitsToDelete.forEach(function(fruit) {
                    database.ref('fruits').orderByValue().equalTo(fruit).once('child_added', function(snapshot) {
                        snapshot.ref.remove()
                        .then(function() {
                            populateFruits();
                        })
                        .catch(function(error) {
                            console.error("删除失败:", error);
                            alert("删除失败，请检查数据");
                        });
                    });
                });
            }
        }
    </script>
</body>
</html>

额外注意事项 #

• 上线后必须修改Firebase安全规则，结合Firebase Auth实现身份验证，仅允许授权用户访问数据库。
• 定期更新Firebase库版本，避免过时版本带来的安全隐患。
• 若仍存在跨域问题，查看浏览器控制台的具体错误信息，确认API密钥限制是否生效，或数据库URL配置是否正确。

内容的提问来源于stack exchange，提问作者P.J