React Native Firebase：如何将产品中的用户ID替换为用户信息对象？

原代码存在的问题 #

• forEach 不支持异步函数，内部的 await 不会阻塞循环执行，导致 setProducts 调用时用户数据还没加载完成，最终拿到的产品数组不完整或为空
• 每个产品单独请求用户数据，重复请求同一用户会浪费Firestore配额和网络资源
• 组件卸载时没有取消Firestore快照监听，会引发内存泄漏
• 未处理用户数据获取失败的异常情况

优化后的实现 #

基础优化：批量获取用户+Promise.all #

先收集所有需要的用户ID，去重后批量请求用户数据，用Promise.all等待所有异步操作完成后再更新状态，减少请求次数并保证数据完整。

const GetProductsByDate = () => {
  const userRef = firestore().collection('users');

  useEffect(() => {
    // 订阅产品快照，返回取消订阅函数
    const unsubscribeProducts = firestore()
      .collection('products')
      .orderBy('date_listed', 'desc')
      .onSnapshot(async (querySnapshot) => {
        try {
          // 提取所有产品的基础数据和卖家ID
          const productItems = querySnapshot.docs.map(doc => ({
            ...doc.data(),
            productId: doc.id,
            sellerId: doc.data().seller.id
          }));

          // 去重卖家ID，避免重复请求同一用户
          const uniqueSellerIds = [...new Set(productItems.map(item => item.sellerId))];

          // 批量获取所有卖家数据，存入Map快速查找
          const userFetchPromises = uniqueSellerIds.map(id => 
            userRef.doc(id).get().then(doc => [id, doc.data()])
          );
          const sellerMap = new Map(await Promise.all(userFetchPromises));

          // 构建包含卖家信息的最终产品数组
          const productsWithSellers = productItems.map(item => ({
            ...item,
            seller: sellerMap.get(item.sellerId) || null, // 兼容用户不存在的情况
            // 移除原有的seller.id字段，保持结构整洁
            sellerId: undefined
          }));

          setProducts(productsWithSellers);
        } catch (err) {
          console.error('加载产品/用户数据失败:', err);
        }
      });

    // 组件卸载时取消快照订阅
    return () => unsubscribeProducts();
  }, []);
};

进阶优化：加入用户数据缓存 #

如果产品列表频繁更新，相同用户会被重复请求，加入内存缓存可以进一步减少请求次数，提升响应速度。

const GetProductsByDate = () => {
  const userRef = firestore().collection('users');
  // 用Map缓存已获取的用户数据，键为用户ID，值为用户信息
  const [sellerCache, setSellerCache] = useState(new Map());

  useEffect(() => {
    const unsubscribeProducts = firestore()
      .collection('products')
      .orderBy('date_listed', 'desc')
      .onSnapshot(async (querySnapshot) => {
        try {
          const productItems = querySnapshot.docs.map(doc => ({
            ...doc.data(),
            productId: doc.id,
            sellerId: doc.data().seller.id
          }));

          // 找出缓存中未存在的卖家ID
          const missingSellerIds = productItems
            .map(item => item.sellerId)
            .filter(id => !sellerCache.has(id));

          // 仅请求缺失的用户数据，更新缓存
          if (missingSellerIds.length > 0) {
            const newSellerPromises = missingSellerIds.map(id => 
              userRef.doc(id).get().then(doc => [id, doc.data()])
            );
            const newSellers = new Map(await Promise.all(newSellerPromises));
            setSellerCache(prevCache => new Map([...prevCache, ...newSellers]));
          }

          // 利用缓存构建最终产品数组
          const productsWithSellers = productItems.map(item => ({
            ...item,
            seller: sellerCache.get(item.sellerId) || null,
            sellerId: undefined
          }));

          setProducts(productsWithSellers);
        } catch (err) {
          console.error('加载数据失败:', err);
        }
      });

    return () => unsubscribeProducts();
  }, [sellerCache]); // 缓存更新时重新生成产品数组
};

核心优化说明 #

• 批量请求：通过去重用户ID，将多次单用户请求合并为一次批量请求，大幅减少Firestore调用次数
• 异步控制：使用Promise.all等待所有用户数据加载完成后再更新状态，确保产品数组的完整性
• 内存泄漏防护：正确返回Firestore快照的取消订阅函数，组件卸载时终止监听
• 异常处理：加入try/catch捕获加载过程中的错误，避免程序崩溃
• 缓存优化：进阶方案中加入内存缓存，避免重复请求同一用户数据，提升性能

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