如何通过JavaScript将HTML表单提交按钮与Firebase对接

• 补全HTML表单的基础结构
  所有需要提交的输入控件必须配置name属性，否则无法正常取值，可参考修正后的HTML示例（顺带修正原有代码里按钮文本多余的闭引号）：

<div class="form-popup" id="myForm">
  <form id="add-data" class="form-container">
    <!-- 按业务需求替换实际输入项即可，每个输入项必须加name属性 -->
    <input type="text" name="userName" placeholder="请输入名称" required>
    <input type="text" name="content" placeholder="请输入提交内容" required>
    <button type="submit" class="btn">XXXX</button>
  </form>
</div>

• 确认Firebase基础初始化逻辑前置完成
  确保项目已经引入对应版本的Firebase SDK，并且正确初始化出可直接操作的Firestore实例db，基础初始化代码可参考：

import { initializeApp } from "firebase/app";
import { getFirestore, addDoc, collection } from "firebase/firestore";

const firebaseConfig = {
  // 替换为自己项目控制台生成的配置参数即可
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

• 补全表单提交事件的全链路逻辑
  完整覆盖DOM获取、表单取值、数据写入、状态反馈、异常捕获全流程，替换原有不完整的提交逻辑：

// 首先获取表单DOM实例，这步是原有代码缺失的关键步骤
const form = document.getElementById('add-data');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // 批量收集表单所有输入项的值，不需要逐行单独取input的value
  const formData = new FormData(form);
  const submitPayload = Object.fromEntries(formData.entries());
  // 可选：给每条提交数据附带创建时间，方便后续排序筛选
  submitPayload.createTime = new Date();

  try {
    // 数据写入对应Firebase集合
    await addDoc(collection(db, "替换为你的实际集合名称"), submitPayload);
    // 写入成功反馈
    alert("数据提交成功");
    // 提交完成后重置表单，方便下一次填写
    form.reset();
  } catch (err) {
    // 捕获写入过程中的网络、权限等异常
    alert("提交失败，原因：" + err.message);
  }
})

实操注意事项

• 首次测试时要确认Firestore的安全规则已临时放开对应集合的写权限，否则会触发权限拒绝的写入错误，生产环境需配置合规的权限规则
• 若使用v8版本及更早的旧版Firebase SDK语法，可直接沿用原有写的db.collection('你的集合名').add(submitPayload)链式写法，核心逻辑和新版完全一致
• 不要忽略异步提交的异常捕获，否则写入失败时页面不会有任何反馈，排查问题会很困难

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