从 Firebase 父集合高效访问子集合的攻略

2024-03-19 02:18:24

从 Firebase 父集合高效访问子集合的最佳实践

在 Firebase 的分层数据结构中，一个集合可以包含另一个集合（称为子集合）。访问子集合的数据对于构建复杂的应用程序至关重要，但是如果没有正确的策略，可能会遇到性能问题。本文将深入探讨从 Firebase 父集合高效访问子集合的最佳实践，解决问题、分享代码示例，并解答常见问题。

识别问题：子集合查询的痛点

想象一个场景，你有一个 Firebase 数据库结构，其中项目包含里程碑，而里程碑又包含任务。要显示每个里程碑的进度，你需要访问并聚合子集合（任务）中的数据。

然而，直接从父集合对象中获取子集合数据是不可能的，因为子集合存储在单独的集合中。以下代码示例说明了这种无效的方法：

milestones.map((milestone) => {
  // 错误方法：无法直接访问任务数据
  return (
    <Progress completed={milestone.tasks.filter(i => i.completed).length} total={milestone.tasks.length}>
  )
})

解决方法：使用子集合查询

为了解决这个问题，我们需要使用子集合查询，将父集合中的字段值与子集合中的字段值进行匹配。在我们的示例中，我们可以使用以下查询：

const projectRef = doc(db, `projects/${projectId}`);
const milestoneRefs = collection(projectRef, `milestones`);
const tasksRef = collectionGroup(db, `tasks`);

const query = whereIn(`milestone`, milestoneRefs);

此查询将检索所有属于给定项目的所有任务文档。

高效数据处理：集合快照和状态管理

一旦我们有了查询，我们可以使用 onSnapshot() 函数订阅查询结果的实时更新。在查询结果发生更改时，它将触发回调函数。在回调函数中，我们可以遍历查询结果，提取任务数据并计算已完成任务数和总数。

为了在 UI 中显示信息，我们可以使用状态管理库（如 Redux）或其他机制来更新进度条的已完成数量和总数。

代码示例：整合最佳实践

将最佳实践应用到我们的示例中，可以得到以下改进后的代码：

const [tasks, setTasks] = useState([]);

useEffect(() => {
  const projectRef = doc(db, `projects/${projectId}`);
  const milestoneRefs = collection(projectRef, `milestones`);
  const tasksRef = collectionGroup(db, `tasks`);

  const query = whereIn(`milestone`, milestoneRefs);

  return onSnapshot(query, (snapshot) => {
    const state = snapshot.docs.map((doc) => doc.data());
    setTasks(state)
  });
}, [query])

...

milestones.map((milestone) => {
  const milestoneTasks = tasks.filter((task) => task.milestone.id === milestone.id);
  return (
    <Progress completed={milestoneTasks.filter(i => i.completed).length} total={milestoneTasks.length}>
  )
})