如何访问Firestore子集合以实现React项目中数据的编辑与删除功能？

子集合访问及功能实现方案 #

Firestore 子集合的访问遵循「父集合→父文档→子集合→子文档」的层级调用逻辑，你可以按照以下步骤修改代码实现需求：

1. 调整数据读取逻辑

把原有仅读取父集合的逻辑修改为同时拉取父文档和对应子集合的数据，示例代码如下：

// events-context.js 中替换原fetchEvents方法
const fetchEvents = async () => {
  try {
    // 先拉取events父集合下的所有文档
    const eventSnapshot = await db.collection('events').get();
    const eventsWithEntries = [];
    // 遍历每个父文档，拉取对应子集合内容
    for (const eventDoc of eventSnapshot.docs) {
      const eventBaseInfo = { ...eventDoc.data(), id: eventDoc.id };
      // 这里的eventEntries替换为你自己设置的子集合名称
      const entriesSnapshot = await db
        .collection('events')
        .doc(eventDoc.id)
        .collection('eventEntries')
        .get();
      // 整理子集合条目，每个条目自带唯一id
      const entries = entriesSnapshot.docs.map(entryDoc => ({
        ...entryDoc.data(),
        id: entryDoc.id
      }));
      eventsWithEntries.push({
        ...eventBaseInfo,
        entries
      });
    }
    setEvents(eventsWithEntries);
  } catch ({ message }) {
    alert(`Error @ fetchEvents, Error:${message}`);
  }
};

2. 新增子集合条目方法

const addEventEntry = async (eventId, newEntry) => {
  try {
    // 向指定父文档的子集合添加数据，Firestore会自动生成唯一文档id
    await db
      .collection('events')
      .doc(eventId)
      .collection('eventEntries')
      .add(newEntry);
    // 调用拉取方法刷新数据
    fetchEvents();
  } catch ({ message }) {
    alert(`Error @ addEventEntry, Error:${message}`);
  }
};

3. 编辑子集合条目方法

const editEventEntry = async (eventId, entryId, updatedContent) => {
  try {
    await db
      .collection('events')
      .doc(eventId)
      .collection('eventEntries')
      .doc(entryId)
      .update(updatedContent);
    fetchEvents();
  } catch ({ message }) {
    alert(`Error @ editEventEntry, Error:${message}`);
  }
};

4. 删除子集合条目方法

const deleteEventEntry = async (eventId, entryId) => {
  try {
    await db
      .collection('events')
      .doc(eventId)
      .collection('eventEntries')
      .doc(entryId)
      .delete();
    fetchEvents();
  } catch ({ message }) {
    alert(`Error @ deleteEventEntry, Error:${message}`);
  }
};

注意事项

• 代码中的eventEntries为示例子集合名称，需替换为你实际定义的子集合名称
• 原有存储在数组中的历史数据，可以写临时批量迁移脚本：遍历每个父文档的旧数组字段，挨个调用上面的addEventEntry方法写入子集合，迁移完成后即可删除原数组字段
• 如果不需要一次性拉取所有父文档的子集合数据，也可以按需单独拉取单个父文档的子集合，减少不必要的请求消耗

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