使用TanStack Query时出现No overload matches this call错误求助

问题根源 #

你在useQuery的queryFn中直接执行了getDataById(eventId)，这会立即返回一个Promise，但TanStack Query要求queryFn是一个返回Promise的函数（即QueryFunction类型），而不是直接传入Promise实例，这就导致了类型不匹配的报错。

修复方案 #

1. 修正queryFn的传递方式 #

把直接调用改成传递一个箭头函数，让TanStack Query在需要时才执行数据获取逻辑：

"use client";

import { getDataById } from "@/data-query/appointment";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import React from "react";

export default function EventPageDetail() {
  const { eventId } = useParams();

  // 改为箭头函数包裹，传递函数而非直接执行后的Promise
  const { data, error, isFetching } = useQuery({
    queryKey: ["eventId", eventId],
    queryFn: () => getDataById(eventId),
    // 可选：eventId不存在时禁用查询，避免无效调用
    enabled: !!eventId,
  });

  return <div></div>;
}

2. 优化类型定义（推荐） #

避免使用any，明确类型可以减少后续类型错误：

服务端action代码优化

// 假设数据库id类型为string，根据实际情况调整
export async function getDataById(id: string) {
  try {
    const data = await db.appoinmentSchedule.findUnique({
      where: { id },
    });

    return data;
  } catch (error) {
    // 抛出错误而非返回错误对象，让TanStack Query的error字段正确捕获异常
    throw new Error("Something went wrong");
  }
}

3. 处理useParams的类型 #

useParams()返回的参数可能是string | string[] | undefined，可以添加类型判断确保id有效：

const { eventId } = useParams();
// 过滤出有效的string类型id
const validEventId = typeof eventId === "string" ? eventId : "";

const { data, error, isFetching } = useQuery({
  queryKey: ["eventId", validEventId],
  queryFn: () => getDataById(validEventId),
  enabled: !!validEventId,
});

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