使用JavaScript向Cloud Firestore提交表单数据未入库问题求助

按以下顺序排查修复即可：

• 脚本加载方式错误：JS文件用了ES模块import语法，HTML里引脚本的时候没加type="module"，浏览器根本跑不起来模块代码，直接在初始化阶段就报错了。把两个script标签都加上type="module"属性。
• 取值时机完全错了：你把所有输入框的value获取都写在了点击事件外面，页面刚加载、用户还没填东西的时候就把值取完了，点提交的时候拿的全是页面刚打开时的空值。把所有取值逻辑移到点击事件回调内部，触发提交的时候再拿最新的输入值。
• 异步语法写错了：await必须在async函数里用，你的点击回调没加async关键字，代码直接报语法错误，写入逻辑根本不会执行。给回调函数加上async标记。
• 没阻止表单默认提交：按钮是type="submit"，点了之后浏览器默认会刷新页面提交表单，addDoc的异步请求还没发出去页面就重载了，请求直接被打断。在回调开头加e.preventDefault()拦截默认行为。
• 字段取值有一堆错误：
  • 拼手机号的时候，lead3和last4两个输入框只拿了DOM对象，没取.value，拼出来的是无效的[object HTMLInputElement]
  • description字段同样只拿了DOM元素，没取用户输入的文本，存到库里的是DOM对象
  • 复选框逻辑错了：不管勾没勾选直接取所有框的value拼接，而且把OutdoorBazaar的id拼错成OutdooBazaar（少了个r），会直接报找不到元素的错。复选框要通过选择器拿所有勾选的项，再拼接值。
• HTML结构不全：你贴的表单代码里根本没放id为organization、website、email、areaCode、lead3、last4的输入框，JS拿这些元素的时候得到null，访问.value直接报错中断。先把这些缺失的输入框补上。
• Firestore权限拦截：默认的Firestore规则会拒绝所有未登录用户的写入请求，公开表单没做登录的话，要先调整安全规则——注意上线前必须加人机校验、频率限制，不然会被恶意刷垃圾数据。

修正后代码 #

1. HTML脚本引入修正 #

<!-- 两个脚本都加type="module" -->
<script type="module" src="firebase.js"></script>
<script type="module" src="partnerScripts.js"></script>

2. firebase.js 修正（末尾加导出） #

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

const firebaseConfig = {
    apiKey: "***********",
    authDomain: "***********",
    projectId: "***********",
    storageBucket: "***********",
    messagingSenderId: "***********",
    appId: "***********",
    measurementId: "***********"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const analytics = getAnalytics(app);
// 新增：导出db实例供其他文件使用
export default db;

3. partnerScripts.js 修正 #

import { collection, addDoc } from "firebase/firestore";
import db from './firebase.js'

const submitButton = document.getElementById('submit')
const partnerForm = document.getElementById('partnerForm')

submitButton.addEventListener("click", async (e) => {
    // 阻止表单默认刷新
    e.preventDefault();

    // 提交时再获取最新表单值
    const prefix = document.getElementById('prefixes').value
    const firstName = document.getElementById('givenName').value
    const lastName = document.getElementById('surName').value
    const title = document.getElementById('title').value
    // 注意：先在HTML里补全下面几个id对应的输入框
    const organization = document.getElementById('organization').value
    const website = document.getElementById('website').value
    const email = document.getElementById('email').value
    const phone = `${document.getElementById('areaCode').value}-${document.getElementById('lead3').value}-${document.getElementById('last4').value}`
    // 只收集勾选的兴趣选项
    const checkedInterests = document.querySelectorAll('input[name="interests"]:checked')
    const interests = Array.from(checkedInterests).map(item => item.value).join('\n')
    const description = document.getElementById('description').value

    try {
        const docRef = await addDoc(collection(db, "partnerRequests"), {
            prefix,
            FirstName: firstName,
            LastName: lastName,
            Title: title,
            Organization: organization,
            Website: website,
            Email: email,
            PhoneNumber: phone,
            Interests: interests,
            TellUsWhy: description
        });
        console.log("提交成功，文档ID：", docRef.id);
        partnerForm.reset()
        alert("提交成功，我们会尽快联系你")
    } catch (err) {
        console.error("提交失败：", err);
        alert("提交失败，请稍后重试")
    }
})

4. Firestore测试规则（仅本地调试用，上线必须加校验） #

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /partnerRequests/{docId} {
      allow create: if true;
      allow read, update, delete: if false;
    }
  }
}

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