Firebase Firestore与React一对多关系及引用存储问题

问题背景 #

我正在使用Firebase Firestore和React开发，设置了一对多关系：answers集合包含serviceId、collaboratorId、tokenId字段，作为其他集合的外键。原本这些字段以字符串存储时，代码可以正常保存数据。

原工作代码（字符串存储外键） #

async function handleSubmitResult(e) {
    e.preventDefault();

    await createFormSchema
      .validate({
        name,
        service,
        collaborator,
      })
      .then(() => {
        addDoc(answersCollectionRef, {
          name,
          service,
          collaborator,
          answer1,
          answer2,
          answer3,
          answer4,
          comment,
          createdAt: new Date().toString(),
        });
        console.log("SALVO NO FIREBASE! 🔥");

        // 临时清空表单字段
        document.getElementById("form-rating").reset();

        setName("");
        setService("");
        setCollaborator("");
        setAnswer1(0);
        setAnswer2(0);
        setAnswer3(0);
        setAnswer4(0);
        setComment("");

        navigate("/thanks");
      })
      .catch((error) => {
        toast.error(error.message, {
          theme: "colored",
        });
      });
  }

修改后的代码（尝试存储引用类型） #

将字段改为集合引用类型后无法正常保存，修改代码后虽无报错且能保存，但数据仍以字符串形式存储：

async function handleSubmitResult(e) {
    e.preventDefault();

    await createFormSchema
      .validate({
        name,
        service,
        collaborator,
      })
      .then(() => {
        addDoc(answersCollectionRef, {
          name,
          serviceId: service,
          collaboratorId: collaborator,
          answer1,
          answer2,
          answer3,
          answer4,
          comment,
          createdAt: new Date().toString(),
          tokenId: token,
        });
        console.log("SALVO NO FIREBASE! 🔥");

        // 临时清空表单字段
        document.getElementById("form-rating").reset();

        setName("");
        setService("");
        setCollaborator("");
        setAnswer1(0);
        setAnswer2(0);
        setAnswer3(0);
        setAnswer4(0);
        setComment("");

        navigate("/thanks");
      })
      .catch((error) => {
        toast.error(error.message, {
          theme: "colored",
        });
      });
  }

疑问与解决方案 #

1. 一对多关系下应该存储ID还是文档引用？ #

两种方案都可行，各有适用场景：

• 存储文档ID（字符串）：存储成本低、读写速度快，适合仅需要通过ID关联查询的场景；缺点是需要手动通过ID查询关联文档，无法直接利用Firestore的引用特性。
• 存储文档引用（DocumentReference类型）：关联关系更直观，Firestore控制台可直接点击跳转至关联文档，且能直接通过引用获取文档数据；缺点是存储体积略大于字符串，写入时需构造合法的引用对象。

2. 如何获取Service文档的ID？ #

• 如果service是从Firestore查询得到的文档快照（DocumentSnapshot），通过service.id即可获取文档ID；
• 如果service是文档引用（DocumentReference），同样通过service.id获取ID；
• 如果是从表单（如下拉框）选择的选项，需确保选项值绑定的是文档ID或完整的引用对象。

3. 如何正确存储文档引用类型？ #

要存储真正的DocumentReference，不能直接传入字符串，需使用Firestore的doc()方法构造引用对象：

// 导入所需的Firestore方法和实例
import { doc } from "firebase/firestore";
import { db } from "./你的Firebase配置路径";

// 在addDoc中替换为构造好的引用
addDoc(answersCollectionRef, {
  name,
  serviceId: doc(db, "services", service), // service为文档ID字符串
  collaboratorId: doc(db, "collaborators", collaborator),
  tokenId: doc(db, "tokens", token),
  answer1,
  answer2,
  answer3,
  answer4,
  comment,
  createdAt: new Date().toString(),
});

这样写入的serviceId等字段就会是Firestore的文档引用类型，而非字符串。

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