useQuery(tanstack/react-query)非函数TypeError问题求助

核心问题：自定义Hook不能是异步函数 #

你的useFetchProducts被定义为async function，但React Hook必须是同步执行的。async函数会返回Promise，这会破坏React的Hook规则，导致React无法正确识别内部调用的useQuery，进而抛出看似是导入错误的异常。

修复步骤 #

1. 移除自定义Hook的async关键字 #

queryFn本身可以是异步函数，但整个自定义Hook不能是异步的，修改代码如下：

import { useQuery } from "@tanstack/react-query";
import Stripe from "stripe";

// 移除async关键字
export default function useFetchProducts() {
  async function getStripeProducts() {
    const stripe = new Stripe(process.env.STRIPE_SECRET ?? "", {
      apiVersion: "2023-10-16",
    });

    const res = await stripe.prices.list({
      expand: ["data.product"],
    });

    const prices = res.data;
    return prices;
  }

  return useQuery({ queryKey: ["stripeProducts"], queryFn: getStripeProducts });
}

2. 确认已配置React Query Provider #

如果应用根组件没有包裹QueryClientProvider，useQuery无法正常初始化，也会触发类似错误，补充配置：

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

export default Root;

3. 检查依赖版本与缓存 #

• 确认安装的是@tanstack/react-query（v4+版本），旧版v3的包名为react-query，导入路径需对应修改为import { useQuery } from 'react-query'。
• 清理依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

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