React/Next.js应用中无法将表单数据更新至Firestore数据库

以下是几个核心问题点及对应解决办法：

1. 未阻止表单默认提交行为 #

表单提交时浏览器会自动触发页面刷新，这会直接中断Firestore的异步写入操作，导致数据还没完成写入就被终止。必须在提交函数中添加阻止默认行为的代码：

const sendData = async (event) => {
  event.preventDefault(); // 阻止页面刷新，保证异步操作完成
  try {
    // 原有写入逻辑
  } catch (error) {
    // 错误处理逻辑
  }
};

2. 校验用户对象有效性 #

如果useUser返回的user为null或undefined，会导致Firestore的文档引用无效，但部分场景下不会触发显性错误，最终表现为“无报错但数据没写入”。建议添加用户存在性校验：

const sendData = async (event) => {
  event.preventDefault();
  if (!user) {
    alert("请先完成登录");
    return;
  }
  try {
    // 原有写入逻辑
  } catch (error) {
    // 错误处理逻辑
  }
};

3. 区分setDoc与updateDoc的行为差异 #

成功写入的组件使用updateDoc（仅更新指定字段，不影响文档其他内容），而当前组件使用的setDoc默认会覆盖整个文档（若文档不存在则创建）。如果目标是更新现有用户文档的orgName字段，推荐改用updateDoc，或给setDoc添加merge: true选项避免覆盖原有数据：

• 改用updateDoc：

await updateDoc(userDoc, {
  orgName: orgName,
});

• 或使用带合并选项的setDoc：

await setDoc(userDoc, {
  orgName: orgName,
}, { merge: true });

修改后的完整组件代码 #

import { db } from "@/lib/firebase/initFirebase";
import { doc, updateDoc } from "firebase/firestore";
import { useUser } from "@/lib/firebase/useUser";
import { useState } from "react";

const WriteOrgToCloudFirestore = () => {
  const { user } = useUser();
  const [orgName, setOrgName] = useState("");

  const handleChange = (event) => {
    setOrgName(event.target.value);
  };

  const sendData = async (event) => {
    event.preventDefault();
    if (!user) {
      alert("请先登录");
      return;
    }
    try {
      const userDoc = doc(db, "users", user.id);
      await updateDoc(userDoc, {
        orgName: orgName,
      });
      alert("用户数据已成功写入Cloud Firestore！");
    } catch (error) {
      console.log(error);
      alert(error.message);
    }
  };

  return (
    <div style={{ margin: "5px 0" }}>
      <form onSubmit={sendData}>
        <input type="text" value={orgName} onChange={handleChange} />
        <input type="submit" style={{ width: "100%" }} value="发送数据" />
      </form>
    </div>
  );
};

export default WriteOrgToCloudFirestore;

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