Next.js+Firebase Firestore数据无法实时更新问题求助

当前代码用getCountFromServer是单次请求，只会在组件调用时获取一次数据，无法监听Firestore中的数据变化，所以必须刷新页面才能看到更新。要实现实时更新，需要用Firestore的onSnapshot监听查询变化。

修改后的代码示例 #

'use client'; // 仅Next.js App Router需要，Pages Router可忽略
import { useEffect, useState } from 'react';
import { collection, query, where, onSnapshot, getCountFromServer } from 'firebase/firestore';
import { db } from '../path-to-your-firebase-config'; // 替换为你的Firebase配置路径

export default function UserCounter() {
  // 初始化状态为数字类型，更符合计数场景
  const [userCount, setUserCount] = useState(0);

  useEffect(() => {
    // 构建查询条件
    const unverifiedUsersQuery = query(
      collection(db, 'users'),
      where('isVerified', '==', 'false')
    );

    // 先获取初始计数，避免页面加载时显示0的短暂空白
    const getInitialCount = async () => {
      const countSnapshot = await getCountFromServer(unverifiedUsersQuery);
      setUserCount(countSnapshot.data().count);
    };
    getInitialCount();

    // 设置实时监听：当查询结果变化时自动触发回调
    const unsubscribe = onSnapshot(unverifiedUsersQuery, async () => {
      const countSnapshot = await getCountFromServer(unverifiedUsersQuery);
      setUserCount(countSnapshot.data().count);
    });

    // 组件卸载时取消监听，防止内存泄漏
    return () => unsubscribe();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <h1>实时用户计数器: {userCount}</h1>
  );
}

核心要点 #

• 用useEffect管理监听生命周期：组件挂载时初始化监听，卸载时清理监听，避免内存泄漏。
• onSnapshot会在Firestore中符合查询条件的数据发生变化（新增、删除、修改）时自动触发回调，此时重新获取最新计数并更新状态。
• 初始计数获取：确保页面加载时能立即显示当前数据，提升用户体验。
• 变量名优化：用userCount替代原getUsers，更清晰表达状态含义，符合React状态变量命名规范。

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