Firestore调用updateDoc多字段更新报错：不支持嵌套数组

你所有状态变量的初始值都被错误地用数组包裹（比如useState([date])），导致未修改的字段会保持数组类型。当同时更新多个字段时，若存在数组类型的字段值，Firestore会触发"不支持嵌套数组"的校验逻辑（即使是一维数组，多字段更新场景下会触发严格校验）。

而单个字段更新时能正常运行的原因是：若该字段被用户修改过，状态会变成字符串类型，Firestore可正常接受；若未修改，单个数组字段的更新未触发严格的嵌套校验，侥幸通过了检查。

1. 修正状态初始化 #

去掉数组包裹，直接用传入的props值初始化状态：

const [createDate, setCreateDate] = useState(date)
const [createName, setCreateName] = useState(name)
const [createDoctor, setCreateDoctor] = useState(doctor)
const [createStatus, setCreateStatus] = useState(status)

2. 修正输入框默认值 #

输入框的defaultValue应直接使用props的原始值，避免初始显示数组的字符串化结果：

// name输入框
<input
  type="text"
  className="form-control"
  placeholder="enter investigation here..."
  defaultValue={name}
  onChange={(e) => setCreateName(e.target.value)}
  size="3080"
/>

// date输入框
<input
  type="date"
  className="form-control"
  defaultValue={date}
  onChange={(e) => setCreateDate(e.target.value)}
/>

// doctor输入框
<input
  type="text"
  placeholder="Consultant doctor.."
  className="form-control"
  defaultValue={doctor}
  onChange={(e) => setCreateDoctor(e.target.value)}
  size="3080"
/>

// status输入框
<input
  type="text"
  placeholder="enter status here.."
  className="form-control"
  defaultValue={status}
  onChange={(e) => setCreateStatus(e.target.value)}
  size="3080"
/>

3. 可选优化（非必须） #

替换window.location.reload()为状态驱动的页面更新逻辑，避免强制刷新带来的不良体验：

// 比如在父组件中维护数据状态，更新后通过回调触发父组件重新获取数据
// 此处仅示例思路，需结合你的项目结构调整
const updateData = async (e) => {
  e.preventDefault()
  try {
    const taskDocument = doc(db, "dentist/" + userId , "investigations", id);
    await updateDoc(taskDocument, {
      name: createName,
      doctor: createDoctor,
      date: createDate,
      status: createStatus,
    });
    // 调用父组件传入的回调函数刷新数据
    props.onUpdateSuccess();
    // 关闭模态框
    const modal = bootstrap.Modal.getInstance(document.getElementById(`id${id}`));
    modal.hide();
  } catch (err) {
    console.log(err);
  }
}

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