Firebase查询集合各文档子集合数据并聚合统计实现问题

问题根因 #

控制台无报错但拿不到统计结果，是多个逻辑错误叠加导致的：

1. 监听workout列表的useEffect未写依赖数组，组件每次重渲染都会重新绑定监听，触发无限循环
2. 卡路里统计逻辑完全错误：qSnap是子集合查询返回的快照对象，本身不存在calories属性，直接写totalCount += qSnap.calories永远累加的是undefined，算不出有效值
3. 就算算出每个用户的累计卡路里，也没有将结果合并到全局workouts状态中，组件渲染时根本拿不到统计值
4. 时间查询调用了moment的内部私有属性_d，如果数据库中存储的time字段类型和传入的timeDiff不匹配（比如传JS Date对象、库里存的是数字时间戳），范围查询会直接返回空结果
5. Firebase重复初始化：同时调用了老版compat接口的firebase.initializeApp和新版v9模块化接口的initializeApp，上线后容易出现不可复现的诡异问题
6. 现有查询是典型的N+1问题：先拉全量用户列表，再对每个用户单独发一次子集合查询，生产环境数据量上涨后，请求数会直接爆炸，延迟和成本都会陡增。

现有项目代码 #

App.js #

function App() {
    const [user, setUser] = useState(null);
    const [workouts, setworkouts] = useState([]);
    const [error, setError] = useState(null);

    useEffect(() => {
        const unsubscribe = firebase
            .auth()
            .onAuthStateChanged((user) => setUser(user));
        return unsubscribe;
    }, []);

    useEffect(() => {
        const unsubscribe = FirestoreService.getworkoutItems(
            (qSnapshot) => {
                const updatedworkouts = qSnapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data(),
                }));
                setworkouts(updatedworkouts);
                setError(false);
            },
            (error) => setError(true)
        );
        return unsubscribe;
    // 原代码此处缺失依赖数组
    });

    useEffect(() => {
        const fetchData = async () => {
            try {
                const qSnapshot = await getDocs(collection(db, "workouts"));

                let allDocs = [];
                qSnapshot.forEach((doc) => {
                    allDocs.push({ id: doc.id, ...doc.data() });
                });
                for (const item of allDocs) {
                    const time = 12;
                    // 原代码调用moment内部私有属性
                    const timeDiff = moment(new Date()).subtract(time, "hours")._d;
                    const qSnap = await getDocs(
                        collection(db, `workouts/${item.id}/Extra`).where(
                            "time",
                            ">=",
                            timeDiff
                        )
                    );

                    let totalCount = 0;
                    // 原代码错误读取快照对象不存在的属性
                    totalCount += qSnap.calories;
                    console.log(qSnap);
                    console.log(totalCount);
                    let allQDocs = [];

                    if (!qSnap.empty) {
                        qSnap.forEach((doc) => {
                            allQDocs.push({
                                id: doc.id,
                                calories: doc.data().calories,
                                ...doc.data(),
                            });
                            console.log(allQDocs);
                            console.log(allQDocs[0].calories);
                        });
                    } else {
                    }
                    // 原代码计算完成后未将结果合并到全局状态
                }
            } catch (err) {
                console.log(err);
            }
        };
        fetchData();
    }, []);

    return (
        <div>
            <Container>
                <Header />
                <Divider horizontal section>
                    Fitness Monitor
                </Divider>

                {!error && user ? (
                    <Card.Group itemsPerRow="8">
                        {workouts &&
                            workouts.map((workout) => {
                                return <Cards key={workout.id} workout={workout} />;
                            })}
                    </Card.Group>
                ) : (
                    <h2> sign in </h2>
                )}
            </Container>
        </div>
    );
}

export default App;

firebase.js #

const firebaseConfig = {
    XXXXXXXXXXXXXXXXX,
};
// 原代码存在重复初始化问题
firebase.initializeApp(firebaseConfig);

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

export const getworkoutItems = (snapshot, error) => {
    const ref = collection(db, "workouts");
    const query = query(ref);
    return onSnapshot(query, snapshot, error);
};

数据库结构参考 #

• 单运动记录用户数据库结构：
  
• 含运动子集合用户数据库结构：
  

修复方案 #

开发环境快速修复 #

1. 给所有useEffect补全依赖数组，避免无限重渲染
2. 遍历子集合查询快照的docs数组累加卡路里，不要直接读取快照对象的不存在属性
3. 计算完每个用户的累计卡路里后，同步更新到workouts状态
4. 修正时间查询传值，确保和数据库字段类型一致
5. 删除重复的Firebase初始化代码，统一使用v9模块化接口

修正后的firebase.js初始化代码：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const firebaseConfig = {
    // 填写你的配置项
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);
const provider = new GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });
export const signInWithGoogle = () => signInWithPopup(auth, provider);

export const getworkoutItems = (snapshot, error) => {
    const ref = collection(db, "workouts");
    const q = query(ref);
    return onSnapshot(q, snapshot, error);
};

修正后的App.js核心统计逻辑：

useEffect(() => {
  const unsubscribe = FirestoreService.getworkoutItems(
    async (qSnapshot) => {
      const baseWorkouts = qSnapshot.docs.map((doc) => ({
        id: doc.id,
        totalCalories: doc.data().calories || 0, // 用根文档的最近一次卡路里作为初始值
        ...doc.data(),
      }));
      setError(false);
      const timeThreshold = new Date(Date.now() - 12 * 60 * 60 * 1000);
      // 批量查询每个用户的子集合数据，累加卡路里
      const updatedWorkouts = await Promise.all(
        baseWorkouts.map(async (workout) => {
          try {
            const extraQuery = query(
              collection(db, `workouts/${workout.id}/Extra`),
              // 注意：如果库里time存的是数字时间戳，这里传Date.now() - 12*3600*1000
              where("time", ">=", timeThreshold)
            );
            const extraSnap = await getDocs(extraQuery);
            let extraTotal = 0;
            extraSnap.forEach(doc => {
              extraTotal += doc.data().calories || 0;
            });
            return {
              ...workout,
              totalCalories: (workout.calories || 0) + extraTotal
            }
          } catch (e) {
            // 没有Extra子集合的用户直接返回原数据
            return workout;
          }
        })
      )
      setworkouts(updatedWorkouts);
    },
    (error) => setError(true)
  );
  return unsubscribe;
// 补全空依赖数组
}, []);

渲染组件时直接读取workout.totalCalories即可拿到12小时窗口内的累计卡路里值。

生产环境优化方案 #

不要使用N+1查询，直接用Firestore集合组查询能力，一次性拉取所有用户下符合时间范围的Extra子集合记录，再按父文档ID分组统计，请求数从N+1降到2次，性能提升明显：

const fetchProductionData = async () => {
  const timeThreshold = new Date(Date.now() - 12*3600*1000);
  // 提前在Firebase控制台为Extra子集合的time字段创建集合组索引
  const extraAllSnap = await getDocs(
    query(collectionGroup(db, "Extra"), where("time", ">=", timeThreshold))
  );
  const extraCalMap = {};
  extraAllSnap.forEach(doc => {
    const parentWorkoutId = doc.ref.parent.parent.id;
    extraCalMap[parentWorkoutId] = (extraCalMap[parentWorkoutId] || 0) + (doc.data().calories || 0);
  })
  // 拉取用户列表后直接和map中的累计值合并即可，无需循环发送请求
}

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