Next.js+Tanstack Query+Axios获取数据出现undefined及报错求助

架构老林

2026-7-15

解决Tanstack Query中queryFn获取数据后外部data为undefined的问题

你的问题核心是queryFn函数没有返回数据，这直接导致了控制台报错和外部data为undefined的现象。

看你的代码，queryFn内部虽然成功获取到了数据，但最后没有将数据返回给Tanstack Query，因此Query无法拿到结果，外部解构的data自然就是undefined。

修改后的代码：

const Home = () => {

  const { data, isLoading } = useQuery({
    queryKey: ['products'],
  
    queryFn: async () => {
      const res = await axios.get('https://fakestoreapi.com/products');
      // 关键：返回获取到的数据
      return res.data;
    }
  });

  // 请求未完成时显示加载状态，避免访问undefined的data
  if (isLoading) {
    return <div>加载中...</div>;
  }

  console.log(data); // 请求完成后即可正常获取数据

  return (
    <section>
      {/* 此处可渲染data内容 */}
    </section>
  );
};

原因说明：

Tanstack Query强制要求queryFn必须返回非undefined的值，否则会抛出你看到的Query data cannot be undefined错误。
你之前的代码中，queryFn仅执行了console.log(data)，没有return语句，函数默认返回undefined，导致Query无法获取数据。
使用普通fetch能正常工作，应该是你当时在fetch回调中正确返回了解析后的数据（比如return response.json()），因此Query能拿到结果。