React Query无法获取单产品数据，请求排查代码问题

核心问题定位 #

从你提供的代码来看，导致React Query失效的关键问题有以下几点：

1. 自定义Hook传参不匹配 #

useProduct 定义时接收对象格式参数（{id}），但组件中调用时直接传递了单个id值，导致Hook内部的id为undefined，请求URL变成https://fakestoreapi.com/products/undefined，无法获取有效数据。

2. 缺少React Query全局上下文Provider #

React Query必须在QueryClientProvider包裹的组件树中才能正常工作，如果你的应用根组件未配置该Provider，useQuery会完全失效。

3. Fetch请求未处理错误状态 #

fetch API在返回4xx/5xx状态码时不会自动抛出异常，React Query会误判请求成功，无法捕获错误场景。

4. URL参数类型不匹配（潜在问题） #

useParams()返回的id是字符串类型，部分API可能要求数字参数，虽然fakestoreapi兼容字符串，但这是常见的隐性问题。

分步修复方案 #

修复1：统一Hook传参逻辑 #

两种可选方案，二选一即可：

方案A：调整useProduct接收单个id参数

export function useProduct(id) {
  return useQuery({
    queryKey: ["products", id],
    queryFn: () => fetchProductById(id),
    enabled: !!id, // 仅当id存在时发起请求，避免无效调用
  });
}

方案B：组件调用时传递对象参数

const { id } = useParams();
const {data} = useProduct({ id });

修复2：配置全局QueryClientProvider #

在应用根组件（如App.jsx）中添加Provider：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的路由和组件内容 */}
    </QueryClientProvider>
  );
}

export default App;

修复3：完善Fetch错误处理 #

export async function fetchProductById(id) {
  const response = await fetch(`https://fakestoreapi.com/products/${id}`);
  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`); // 抛出错误让React Query捕获
  }
  return response.json();
}

修复4：处理id类型转换（推荐） #

const { id } = useParams();
const productId = parseInt(id, 10); // 转换为数字类型
const {data, isLoading, isError, error} = useProduct(productId);

修复后完整组件代码 #

import React from 'react'
import { useParams } from "react-router-dom";
import { useProduct } from '../fetch/api';

const ProductDescription = () => {
    const { id } = useParams();
    const productId = parseInt(id, 10);
    const {data, isLoading, isError, error} = useProduct(productId);

    if (isLoading) return <div>加载中...</div>;
    if (isError) return <div>加载失败: {error.message}</div>;

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.description}</p>
            <p>价格: ${data.price}</p>
        </div>
    );
};

export default ProductDescription;

额外排查建议 #

• 打开浏览器控制台查看是否有React Query上下文缺失的警告
• 检查Network标签，确认API请求是否发送、URL是否正确、返回值是否正常
• 验证React Query版本：如果使用v4+，导入路径应为@tanstack/react-query，旧版react-query需调整导入

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