Web App无法写入Firestore模拟器或生产环境 求助排查

1. 阻止表单默认提交行为（最关键） #

表单提交的默认行为会刷新页面，导致异步写入操作还未完成就被中断，控制台日志也会被清空。必须在提交函数中阻止这一行为：

修改submitForm函数，添加event.preventDefault()：

async function submitForm(event) {
  // 阻止页面刷新，让异步操作能完成
  event.preventDefault();

  // 原有获取表单数据的代码...
}

2. 修正setDoc返回值的错误使用 #

setDoc方法不返回文档对象，你尝试访问newDoc.id会抛出错误，但页面刷新让这个错误无法显示。正确做法是先创建文档引用，再执行写入：

try {
  // 先创建文档引用并保存
  const docRef = doc(db, "attendees", "testID");
  await setDoc(docRef, formData);
  console.log("new id is", docRef.id);
} catch (err) {
  console.error("write to firestore failed. reason :", err);
}

3. 额外排查项 #

• Firestore安全规则：确保规则允许写入。测试阶段可临时使用宽松规则（生产环境务必收紧）：

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

• 模拟器状态：如果用模拟器，取消注释connectFirestoreEmulator(db, '127.0.0.1', 8080);，并确保模拟器已通过firebase emulators:start启动。
• 表单ID匹配：确认HTML中输入框ID（firstName/lastName/phoneNumber）和表单ID（infoform）完全匹配，避免无法获取输入值。

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