Firestore数据无法写入排查及HTML表单对接Firestore实现咨询

• 语法混用问题：你引入的是Firebase 9.x版本CDN，但用了8.x的旧API写法，还加入了仅Node.js环境支持的require()语法，浏览器加载后直接抛出语法错误，代码根本无法执行。
• 缺少错误捕获：你的代码只写了成功回调，没有.catch()捕获异常，无法定位是权限问题、配置问题还是API调用错误。
• 触发逻辑问题：当前代码是页面加载时直接执行写入，如果是表单提交场景，需要绑定表单的提交事件。

首先调整Firestore安全规则（测试阶段临时使用，功能验证完成后必须修改规则限制权限，避免恶意操作）：

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

完整可运行的HTML表单代码：

<!DOCTYPE html>
<html>
<head>
    <title>提交表单到Firestore</title>
    <!-- 引入Firebase 9.x compat版本CDN，兼容旧版API写法，无需require -->
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore-compat.js"></script>
</head>
<body>
    <!-- 提交表单 -->
    <form id="submitForm">
        <div>
            <label>姓名：</label>
            <input type="text" name="namn" required>
        </div>
        <div>
            <label>邮箱：</label>
            <input type="email" name="epost" required>
        </div>
        <div>
            <label>电话：</label>
            <input type="tel" name="tel" required>
        </div>
        <div>
            <label>住址：</label>
            <input type="text" name="fast" required>
        </div>
        <div>
            <label>问题描述：</label>
            <textarea name="meddelanse" required></textarea>
        </div>
        <button type="submit">提交</button>
    </form>

    <script>
        // 初始化Firebase，替换为你自己的项目配置
        firebase.initializeApp({
          apiKey: '替换为你的apiKey',
          authDomain: '替换为你的authDomain',
          projectId: '替换为你的projectId'
        });
        const db = firebase.firestore();

        // 绑定表单提交事件
        const form = document.getElementById('submitForm');
        form.addEventListener('submit', (e) => {
            e.preventDefault(); // 阻止表单默认提交刷新行为
            // 读取表单数据
            const formData = {
                namn: form.namn.value,
                epost: form.epost.value,
                tel: form.tel.value,
                fast: form.fast.value,
                meddelanse: form.meddelanse.value
            };
            // 写入Firestore
            db.collection("felanmalan").add(formData)
            .then((docRef) => {
                console.log("提交成功，文档ID：", docRef.id);
                alert('提交成功');
                form.reset(); // 清空表单
            })
            .catch((error) => {
                console.error("提交失败，错误信息：", error);
                alert('提交失败，请打开控制台查看错误详情');
            });
        })
    </script>
</body>
</html>

• 功能测试正常后，必须修改Firebase安全规则，限制写入权限，避免被恶意刷数据。
• Zapier可直接绑定Firestore新文档创建触发事件，配置完成后有新数据入库就会自动触发邮件发送，无需额外开发。

内容的提问来源于stack exchange，提问作者Patrik Malmgren-Rask