刷新时router.query参数为undefined导致react-query查询失效怎么办？

问题根源 #

在Next.js中，useRouter返回的router.query在页面初始加载（尤其是刷新场景）时可能处于未初始化状态，此时id值为undefined。直接将其传入useQuery会引发两个问题：

• 发起无效API请求（URL中会包含undefined）
• React Query的查询键变为["pzs", undefined]，当id正确加载后，查询键更新为["pzs", 实际ID]，旧的无效查询会被DevTools标记为过时并移除，造成「查询丢失」的错觉

解决方案 #

1. 给useQuery添加启用条件 #

修改自定义React Query钩子，仅当id存在时才触发查询：

const fetchPZDetailData = (id) => {
  return axiosInstance.get(`documents/pzs/${id}`);
};

export const usePZDetailData = (id) => {
  return useQuery(
    ["pzs", id], 
    () => fetchPZDetailData(id), 
    { 
      enabled: !!id // 只有id非空时才执行查询
    }
  );
};

2. 组件保持原有逻辑即可 #

你的PZDetail组件无需额外修改，当router.query.id加载完成后，enabled自动切换为true，React Query会自动发起正确的查询：

import { usePZDetailData } from "../../hooks/usePZData";
import { useRouter } from "next/router";
const PZDetail = () => {
  const router = useRouter();
  const { id } = router.query;
  const { data, isLoading, error } = usePZDetailData(id);

  return (
    <>
      {isLoading && <div>加载中...</div>}
      {error && <div>加载失败：{error.message}</div>}
      {data && <div>详情内容：{JSON.stringify(data)}</div>}
    </>
  );
};

export default PZDetail;

补充说明 #

• 这种方式利用React Query的内置机制自动触发查询，比在useEffect中手动调用refetch更符合React Query的设计理念
• 请确保你的axiosInstance配置正确，排除CORS、基础路径错误等网络问题导致的请求失败（这也是查询丢失的潜在诱因）

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