如何在Firebase/React Query中实现分页？Firestore数据加载异常排查

开发者阿泽

2026-6-25

问题修复方案

核心问题拆解

React Query用法错误：queryFn的职责是返回数据，而非手动调用setItems。React Query会自动管理查询结果的缓存与状态，手动修改state会导致状态不同步。
数据格式未转换：直接将data.docs（QueryDocumentSnapshot对象数组）存入state，没有提取文档ID和实际数据，无法得到期望的[{...}]结构。
拼写错误：console.log(data.docs.lenght)里的lenght应为length，不过输出0说明确实未获取到有效数据，优先排查查询逻辑。
上下文初始状态依赖错误：initialState中的products依赖items这个state，初始时items为空数组，后续items更新也不会同步到initialState，上下文初始状态应使用独立默认值。

修复后的代码示例

const [items, setItems] = useState([]);

// 上下文初始状态用固定默认值，不依赖可变state
const initialState = {
  showCart: false,
  products: [],
  cartItems: c,
};

// React Query正确用法：queryFn返回数据，通过data属性获取结果
const { data: productsData, isLoading } = useQuery({
  queryKey: ["products"],
  queryFn: async () => {
    const first = query(
      collection(db, "products"),
      orderBy("title"),
      limit(4)
    );
    const querySnapshot = await getDocs(first);
    
    // 将文档转换为{key, ...item}格式的目标数组
    const products = querySnapshot.docs.map(doc => ({
      key: doc.id,
      ...doc.data()
    }));
    
    console.log(products.length); // 输出正确的文档数量
    return products; // 返回数据，由React Query缓存管理
  },
});

// 可选：若需将React Query数据同步到本地state（通常无需此步骤，直接用productsData即可）
useEffect(() => {
  if (productsData) {
    setItems(productsData);
  }
}, [productsData]);