React中如何通过Firestore获取客户关联的车辆列表？

我在Firestore中有clients集合，每个客户文档下包含cars子集合存储车辆信息。尝试用React获取客户列表及对应车辆列表时，由于Firestore快照的异步特性，填充客户数据时cars数组未正确获取到车辆数据，结果异常。

数据结构 #

clients:
w21rffa3:
  name: Johny
  phone: 123123
  cars:
    fn1jnr12:
      brand: AUDi
      model: a6
      number: 24f1
    dsdasgf122:
      brand: AUDi
      model: a3
      number: 62s14

原错误代码 #

const ref = firestore().collection('clients');
const [clientsList, setClientsList] = useState([]);
useEffect(() => {
  return ref.onSnapshot(clientsSnapshot => {
    const clients = [];
    const cars = [];
    clientsSnapshot.forEach(client => {
      const carsRef = ref.doc(client.id).collection('cars').onSnapshot(carsSnapshot => {
        carsSnapshot.forEach(car => {
          if (car.data().brand.length > 0) {
            const {
              brand,
              model,
              number
            } = car.data();
            cars.push({
              id: car.id,
              brand,
              model,
              number,
            });
          }
        });
        // 此处能正确打印车辆数据
        console.log('After forEach: ', cars);
      });
      // 此处cars为空数组，因为子集合快照还未执行
      console.log('After snapshot: ', cars);
      const {
        name,
        phone
      } = client.data();
      clients.push({
        id: client.id,
        name,
        phone,
        cars: cars,
      });
    });
    setClientsList(clients);
  });
}, []);

问题分析 #

原代码的核心问题有两个：

1. 嵌套的onSnapshot是异步执行的，外部直接将空的cars数组赋值给客户对象时，子集合的快照逻辑还未完成，导致cars为空。
2. 使用了全局的cars数组，会导致所有客户共享同一组车辆数据，出现数据混乱。

解决方案 #

方案1：一次性获取数据（非实时更新） #

适合不需要实时同步数据的场景，用get()替代onSnapshot，通过Promise.all等待所有客户的车辆数据加载完成后再更新状态：

const ref = firestore().collection('clients');
const [clientsList, setClientsList] = useState([]);

useEffect(() => {
  const unsubscribeClients = ref.onSnapshot(async (clientsSnapshot) => {
    // 为每个客户创建获取车辆数据的异步任务
    const clientTasks = clientsSnapshot.docs.map(async (clientDoc) => {
      const clientData = clientDoc.data();
      // 一次性获取当前客户的所有车辆
      const carsSnapshot = await ref.doc(clientDoc.id).collection('cars').get();
      // 过滤并格式化车辆数据
      const cars = carsSnapshot.docs
        .filter(carDoc => carDoc.data().brand?.length > 0)
        .map(carDoc => {
          const { brand, model, number } = carDoc.data();
          return { id: carDoc.id, brand, model, number };
        });

      return {
        id: clientDoc.id,
        name: clientData.name,
        phone: clientData.phone,
        cars
      };
    });

    // 等待所有客户的车辆数据加载完成
    const clients = await Promise.all(clientTasks);
    setClientsList(clients);
  });

  // 清理客户集合的监听
  return unsubscribeClients;
}, []);

方案2：实时监听数据变化 #

如果需要客户或车辆数据变化时自动更新UI，保留onSnapshot，但要为每个车辆子集合添加独立监听，并处理清理逻辑：

const ref = firestore().collection('clients');
const [clientsList, setClientsList] = useState([]);

useEffect(() => {
  let isMounted = true; // 防止组件卸载后更新状态
  const unsubscribeClients = ref.onSnapshot((clientsSnapshot) => {
    const clients = [];
    const unsubscribeCarsList = [];

    clientsSnapshot.forEach((clientDoc) => {
      const clientData = clientDoc.data();
      const clientId = clientDoc.id;
      let clientCars = [];

      // 监听当前客户的车辆子集合
      const unsubscribeCars = ref.doc(clientId).collection('cars').onSnapshot((carsSnapshot) => {
        clientCars = carsSnapshot.docs
          .filter(carDoc => carDoc.data().brand?.length > 0)
          .map(carDoc => {
            const { brand, model, number } = carDoc.data();
            return { id: carDoc.id, brand, model, number };
          });

        // 仅在组件挂载时更新状态
        if (isMounted) {
          setClientsList(prevList => 
            prevList.map(client => 
              client.id === clientId ? { ...client, cars: clientCars } : client
            )
          );
        }
      });

      unsubscribeCarsList.push(unsubscribeCars);
      // 先添加客户基本信息，后续车辆更新会自动同步
      clients.push({
        id: clientId,
        name: clientData.name,
        phone: clientData.phone,
        cars: clientCars
      });
    });

    if (isMounted) {
      setClientsList(clients);
    }

    // 清理所有监听
    return () => {
      isMounted = false;
      unsubscribeClients();
      unsubscribeCarsList.forEach(unsubscribe => unsubscribe());
    };
  });

  return unsubscribeClients;
}, []);

方案对比 #

• 方案1代码简洁，适合静态数据场景，无需处理复杂的监听清理。
• 方案2支持实时数据同步，但需要管理多个监听的生命周期，避免内存泄漏。

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