如何在React中通过Firebase按分类ID统计集合数据数量

嘿，我来帮你实现按cateId分组、统计每个分组下文档数量的功能，下面给你两种实用方案，按需选择就行：

方案一：前端拉取数据后分组统计（适合小数据集） #

如果你的temp集合数据量不大，直接把所有文档拉到前端处理是最省心的方式，代码也简单：

import { dbService } from "fbase";

async function getCategoryStats() {
  // 获取temp集合的所有文档
  const snapshot = await dbService.collection('temp').get();
  const countMap = {};

  // 遍历文档，统计每个cateId的数量
  snapshot.forEach(doc => {
    const { cateId } = doc.data();
    countMap[cateId] = (countMap[cateId] || 0) + 1;
  });

  // 转换成你想要的格式：["100001 (3)", "100002 (4)"]
  const result = Object.entries(countMap).map(([id, count]) => `${id} (${count})`);
  console.log(result);
  return result;
}

// 调用这个函数就能拿到结果啦
getCategoryStats();

方案二：用Firestore聚合查询优化（适合大数据集） #

要是你的temp集合数据量比较大，拉全量数据太费带宽，那就用Firestore的聚合功能来优化——先拿到所有唯一的cateId，再逐个统计每个分组的数量：

import { dbService } from "fbase";
import { query, collection, distinct, where, count, getCountFromServer } from "firebase/firestore";

async function getCategoryStats() {
  // 第一步：获取所有不重复的cateId
  const distinctCateQuery = query(collection(dbService, 'temp'), distinct('cateId'));
  const distinctSnapshot = await dbService.get(distinctCateQuery);
  const cateIds = distinctSnapshot.docs.map(doc => doc.data().cateId);

  // 第二步：针对每个cateId，用count聚合查询统计数量
  const statsPromises = cateIds.map(cateId => {
    const countQuery = query(
      collection(dbService, 'temp'),
      where('cateId', '==', cateId),
      count()
    );
    return getCountFromServer(countQuery).then(snap => ({
      cateId,
      count: snap.data().count
    }));
  });

  const stats = await Promise.all(statsPromises);

  // 转换成目标格式
  const result = stats.map(item => `${item.cateId} (${item.count})`);
  console.log(result);
  return result;
}

// 调用函数获取结果
getCategoryStats();

小提示 #

• 方案一代码简洁，适合数据量小的场景；方案二更高效，能减少数据传输，适合大规模数据集；
• 别忘了检查你的Firestore安全规则，确保允许读取temp集合的数据哦！

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