如何在Firestore中添加多字段？解决数据被覆盖问题

你遇到的核心问题是每次添加新产品时覆盖原有数据，原因是你始终向同一个固定ID的文档（doc(board, "items")）写入数据，Firestore的setDoc方法如果指定已存在的文档ID，会直接覆盖该文档内容。

要实现添加多个独立的产品文档（和你展示的结构一致：board集合下有多个产品文档），需要做以下修改：

1. 替换写入方法：用addDoc自动生成唯一ID #

Firestore的addDoc方法会自动为新文档生成唯一ID，无需手动指定，这样每次提交都会创建一个新的产品文档，不会覆盖原有数据。

2. 优化size字段逻辑（可选） #

你当前的size判断逻辑如果不包含对应尺寸，会存入false，更合理的写法是直接存布尔值，或者只保留存在的尺寸。示例：

size: {
  default: {
    small: size.includes("s"),
    medium: size.includes("m"),
    large: size.includes("l"),
    extralarge: size.includes("xl"),
    twoextralarge: size.includes("xxl"),
  },
}

修改后的完整代码 #

import React, { useState } from "react";
import { collection, addDoc } from "firebase/firestore"; // 替换setDoc为addDoc，移除doc
import { db } from "../service/firebaseConfig";

export default function NewProduct() {
  const [name, setName] = useState("");
  const [price, setPrice] = useState("");
  const [kind, setKind] = useState("");
  const [size, setSize] = useState("");
  const [description, setDescription] = useState("");

  const handleName = (e) => setName(e.target.value);
  const handlePrice = (e) => setPrice(e.target.value);
  const handleKind = (e) => setKind(e.target.value);
  const handleSize = (e) => setSize(e.target.value);
  const handleDescription = (e) => setDescription(e.target.value);

  const boardCollection = collection(db, "board");
  
  const addProduct = async () => {
    await addDoc(boardCollection, { // 使用addDoc添加到集合，自动生成ID
      name: name,
      price: price,
      category: kind,
      size: {
        default: {
          small: size.includes("s"),
          medium: size.includes("m"),
          large: size.includes("l"),
          extralarge: size.includes("xl"),
          twoextralarge: size.includes("xxl"),
        },
      },
      description: description,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    addProduct();
    // 清空表单
    setName("");
    setPrice("");
    setKind("");
    setSize("");
    setDescription("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>새로운 제품 등록</h2>
      <input type="text" placeholder="제품명" onChange={handleName} value={name} />
      <input type="text" placeholder="가격" onChange={handlePrice} value={price} />
      <input type="text" placeholder="카테고리" onChange={handleKind} value={kind} />
      <input type="text" placeholder="사이즈" onChange={handleSize} value={size} />
      <input type="text" placeholder="제품설명" onChange={handleDescription} value={description} />
      <button>제품 등록하기</button>
    </form>
  );
}

验证效果 #

修改后，每次点击"제품 등록하기"，Firestore的board集合下会新增一个带有唯一ID的产品文档，结构和你需要的完全一致，不会再覆盖原有数据。

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