从同一对象的firestore获取子集合 - React typescript

Question

我的界面是这样的：

界面反应：

export interface UserTask {
    assignee: String;
    date: String;
}


export interface TaskData {
    id: String;
    taskName: string;
    taskIcon: string;
    taskLog: UserTask[] 
}

Firebase 数据模型（结构）：

- taskData (Main Collection)
    - taskIcon (fields)
    - taskName (fields)
    - taskLog (sub-collection) 
        - assignee  (fields)
        - date (fields)

React 代码获取 Firestore 数据：

import { firestore } from '../firebase';

...

function toTaskData(doc): TaskData {
    if (!doc.exists) {
        throw new Error("TaskData  not found!");
    } else {

        return { id: doc.id, ...doc.data()  } as TaskData;
    }
  }


  const getTaskData = async() => {
    const taskDataRef = firestore.collection('taskData');
    await taskDataRef.get().then(({docs}) => {
      setTaskData(docs.map(toTaskData));
    });
  }

来自 Firestore 的响应 JSON：

我只收到一个包含 taskName 和 taskIcon 数组而不是子集合 taskLog 的响应，我的问题是如何检索子集合或将其映射到 UserTask 数组？

Answer 1

Firestore 查询是浅：当您获取文档时，您不会获取其任何链接子集合中包含的数据。

如果您想从其中一个子集合中获取 Firestore 文档及其所有文档，您需要执行两次提取：一次获取“父”文档，另一次获取子集合的所有文档。

例如，您可以使用Promise.all() 执行以下操作：

const taskDataRef = firestore.collection('taskData');
const querySnapshot = await taskDataRef.get();

const promises = querySnapshot.docs.map(doc => doc.ref.collection('taskLog').get());

const querySnapshotsArray = Promise.all(promises);

querySnapshotsArray.forEach(querySnapshot => {
   
   // Do something with the querySnapshot
   // e.g. querySnapshot.docs....
   // or querySnapshot.forEach(...)

});

---

如果您想将一个父级（taskData 文档）的数据与所有子级taskLog 文档组合在一起，请注意Promise.all() 返回一个解析为输入结果数组的 Promise promises 与输入数组的顺序相同。换句话说，querySnapshotsArray 与promises 的顺序相同。

---

请注意，这样做会导致从所有 taskLog 子集合中读取所有 taskData 文档和所有 taskLog 文档。以仅按需获取子集合的方式组织前端可能会更便宜（例如，如果用户单击按钮或展开部分等...）