React TSX路由切换复用组件时Firestore数据无法自动刷新问题

你的问题核心在于没有用React状态管理数据，而是依赖全局变量存储数据，同时未正确监听路由变化触发数据刷新，导致了以下问题：

• 全局变量更新无法触发组件重渲染，异步获取数据后界面不会自动更新，需二次切换路由才会显示新内容
• 路由切换时未主动重置并重新获取对应数据，旧数据残留

修正后的代码实现 #

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { getDocs, collection, QueryDocumentSnapshot } from 'firebase/firestore';
import { db } from './你的Firebase配置路径'; // 替换为实际配置文件路径
import Card from './Card'; // 替换为Card组件实际路径

export default function CardGrid() {
  const location = useLocation();
  // 用React状态管理零件数据，初始为空数组
  const [parts, setParts] = useState<QueryDocumentSnapshot[]>([]);
  // 加载状态，优化用户体验
  const [isLoading, setIsLoading] = useState(true);

  // 封装数据获取逻辑
  const populateGrid = async () => {
    setIsLoading(true);
    // 先重置数据，彻底清除旧数据残留
    setParts([]);
    
    const program = location.pathname.replace('/parts-list/', '');
    let querySnapshot;

    if (program === 'First') {
      querySnapshot = await getDocs(collection(db, "Programs", "----", program, "-----", "Parts"));
    } else if (program === 'Second') {
      querySnapshot = await getDocs(collection(db, "Programs", "----", program, "-----", "Parts"));
    } else {
      setIsLoading(false);
      return;
    }

    const fetchedParts: QueryDocumentSnapshot[] = [];
    querySnapshot.forEach(doc => fetchedParts.push(doc));
    setParts(fetchedParts);
    setIsLoading(false);
  };

  // 监听路由变化，每次location改变时自动重新获取数据
  useEffect(() => {
    populateGrid();
  }, [location]); // 依赖项设置为location，路由切换时触发执行

  // 加载状态提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="tlCont">
      <div className="gridCont">
        {parts.map((doc) => {
          const pn = doc.get("PN");
          return (
            <div className="gridItm" key={pn}>
              <Card>
                Part Number: {pn}
                <br />
                Description: {doc.get("DESCRIPTION")}
                <br />
                Form Tool: {doc.get("FORM TOOL")}
                <br />
                Trim Tool: {doc.get("TRIM TOOL")}
              </Card>
            </div>
          );
        })}
      </div>
    </div>
  );
}

关键修改说明 #

• 用useState创建parts状态变量存储数据，setParts更新状态时会自动触发组件重渲染，确保界面同步显示最新数据
• 通过useEffect监听location对象变化，路由切换时自动调用populateGrid重新获取对应程序的零件数据
• 在数据获取前调用setParts([])重置状态，彻底避免旧数据残留
• 添加isLoading状态，数据加载完成前显示提示，提升用户体验
• 遍历数据时直接使用当前文档对象，避免数组索引操作，代码更简洁安全

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