React+Firebase博客应用文章计数页面刷新不更新问题求助

问题原因 #

你的代码存在两个核心问题导致刷新后计数失效：

1. useEffect依赖项为空数组[]，仅在组件首次挂载时执行。但useAuthState是异步获取用户状态的，刷新页面初期user为null，此时不会触发文章查询；等user加载完成后，因依赖数组未包含user，useEffect不会重新执行，导致文章数据始终为空。
2. 使用getDocs是一次性读取Firestore数据，无法实时监听文章的增删变化，仅能在组件挂载时获取一次数据。

修复方案 #

调整useEffect的依赖项，改用Firestore实时监听API onSnapshot，既保证刷新页面后能获取最新计数，又能实现数据实时同步。

修改后的完整代码 #

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'
import { useAuthState } from 'react-firebase-hooks/auth'
import { faGoogle } from '@fortawesome/free-brands-svg-icons'
import { useState, useEffect } from 'react'
import { collection, query, where, onSnapshot } from 'firebase/firestore' // 新增onSnapshot
import { db } from '../firebase'

const style = {
  button: `font-bold text-3xl text-white bg-slate-500 p-4 rounded`,
  info: `font-bold`
}

const Account = ({ auth, handleSignIn, handleSignOut }) => {
    
  const [user, loading] = useAuthState(auth);
  const [postCount, setPostCount] = useState(0); // 直接存储计数，优化性能
  const postRef = collection(db, "posts")

  useEffect(() => {
    let unsubscribe;
    if(user){
      const q = query(postRef, where("author_email", "==", user.email));
      // 建立实时快照监听
      unsubscribe = onSnapshot(q, (snapshot) => {
        setPostCount(snapshot.size); // 直接获取文档数量
      });
    }
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe?.();
  }, [user]); // 依赖项加入user，user状态变化时重新执行

  return (
    <div className='text-center p-4'>
      {loading ? 
      <div>
        <p className='italic'>Fetching user data ...</p>
      </div>
      : user ?
      <div>
        <div className='m-4'>
          <p>Your Name: <span className={style.info}>{user.displayName}</span></p>
          <p>Your Email: <span className={style.info}>{user.email}</span></p>
          <p>Your Posts: <span className={style.info}>{postCount}</span></p> {/* 使用postCount */}
        </div>
        <button onClick={handleSignOut} className={style.button}>Sign Out</button>
      </div>
      :
      <div>
        <button onClick={handleSignIn} className={style.button}>Sign in with <FontAwesomeIcon icon={faGoogle} /></button>
      </div>
      }
    </div>
  )
}

export default Account

关键修改点说明 #

• 依赖项调整：将useEffect的依赖数组改为[user]，确保user从null变为登录用户时，自动触发文章查询逻辑。
• 实时监听：用onSnapshot替代getDocs，该API会在Firestore数据变化时自动触发回调，实时更新文章计数。
• 性能优化：直接存储文章数量postCount而非整个文章数组，减少不必要的状态存储和渲染开销。
• 清理监听：在useEffect的返回函数中取消快照监听，避免组件卸载后出现内存泄漏。

修改后，刷新页面时用户状态加载完成后会自动获取最新文章计数；后续用户新增或删除文章时，计数也会实时同步更新。

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