React结合react-redux-firebase优化Firestore关联文档查询降云用量

嘿，我完全懂你现在的困扰——每次获取Visit文档后还要挨个拉取关联的Point文档，不仅代码绕，还让Firestore读取量暴涨，云服务账单肯定超预期。咱们来一步步把这个问题解决掉：

首先得点明你当前代码里的两个核心问题：

• 在useSelector里执行异步操作是反模式：Selector应该是纯同步函数，每次组件渲染都会重复跑这段异步逻辑，直接导致大量无意义的重复请求。
• 循环调用v.puntoId.get()会产生N+1次请求（N是Visit的数量），这正是云用量激增的根源。

最优方案：用react-redux-firebase的populate自动关联文档 #

react-redux-firebase本身就支持自动填充关联的Firestore文档，能帮你批量处理请求、缓存数据，彻底解决N+1问题。

步骤1：配置populate规则

在你的react-redux-firebase初始化配置里，添加关联字段的映射规则（假设你的Point文档存在名为puntos的集合里）：

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true,
  // 定义关联规则：visitas集合的puntoId字段对应puntos集合的文档
  populate: {
    'visitas': {
      'puntoId': 'puntos'
    }
  }
};

步骤2：用useFirestoreConnect自动加载关联数据

在组件里使用useFirestoreConnect钩子，指定要加载的集合并开启populate：

import { useFirestoreConnect, useSelector } from 'react-redux-firebase';

function VisitasComponent() {
  // 连接Firestore，自动填充visitas的puntoId关联文档
  useFirestoreConnect([
    {
      collection: 'visitas',
      populate: [{ child: 'puntoId', root: 'puntos' }]
    }
  ]);

  // 直接从redux store获取已经填充好的完整数据
  const visitas = useSelector(({ firestore: { ordered: { visitas } } }) => visitas);

  // 现在每个visita对象里的puntoId已经是完整的Point文档数据了！
  return (
    <div>
      {visitas?.map(visita => (
        <div key={visita.id}>
          <p>点位经度：{visita.puntoId.longitude}</p>
          <p>点位纬度：{visita.puntoId.latitude}</p>
        </div>
      ))}
    </div>
  );
}

这个方案的核心优势：

• 批量请求：react-redux-firebase会把所有关联的Point文档请求合并，彻底避免N+1次单独请求
• 自动缓存：已经加载过的Point文档会被缓存，重复渲染时不会重复发起请求
• 实时同步：如果Point文档有更新，redux store会自动同步最新数据，无需手动处理

备选方案：用Firestore的getAll批量获取 #

如果你暂时不想用populate功能，也可以手动用Firestore的getAll方法批量获取所有关联的Point文档，比循环调用get高效得多：

import { useFirestore, useSelector, useDispatch } from 'react-redux-firebase';
import { setVisitas } from './your-redux-actions';
import { useEffect } from 'react';

function VisitasComponent() {
  const firestore = useFirestore();
  const dispatch = useDispatch();
  const visitas = useSelector(({ firestore: { ordered: { visitas } } }) => visitas);

  // 组件挂载时批量获取关联数据
  useEffect(() => {
    const fetchFullVisitas = async () => {
      if (!visitas) return;

      // 收集所有Point文档的引用
      const pointRefs = visitas.map(v => v.puntoId);
      // 批量获取所有Point文档
      const pointsSnapshot = await firestore.getAll(...pointRefs);
      // 把Point数据转成Map方便快速查找
      const pointsMap = new Map(pointsSnapshot.map(doc => [doc.ref.path, doc.data()]));

      // 关联Visit和Point数据
      const fullVisitas = visitas.map(v => ({
        ...v,
        punto: pointsMap.get(v.puntoId.path)
      }));

      // 存入redux状态
      dispatch(setVisitas(fullVisitas));
    };

    fetchFullVisitas();
  }, [visitas, firestore, dispatch]);

  // 后续直接使用fullVisitas即可
}

不过这个方案需要手动处理数据关联和状态更新，也没有自动缓存和实时同步的功能，所以还是首推react-redux-firebase的populate方案。

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