React Query调用重载不匹配：useProfile钩子创建问题（Next.js14）

这个错误的核心原因是React Query v4+的API变更——它不再支持把单个字符串作为useQuery的第一个参数，必须传入数组形式的QueryKey，同时你的服务层返回类型也存在不合理的地方。

具体修复步骤： #

1. 更新useQuery的参数格式
   React Query v4要求第一个参数是QueryKey（数组类型，用于缓存标识），替换原来的字符串参数。同时显式指定泛型，让TypeScript正确推断数据类型。

2. 修正服务层的返回类型
   获取当前用户的接口/@me应该返回单个用户对象，而不是数组，所以把instance<IUser[]>改成instance<IUser>。

修改后的代码 #

hooks/useProfile.ts

import { useQuery } from '@tanstack/react-query';
import { UserService } from '@/services/user.service';
import { IUser } from '@/types/user.interface';

export const useProfile = () => {
  // 第一个参数改为数组形式的QueryKey，同时指定泛型
  const { data } = useQuery<IUser>(['get-profile'], () => UserService.getProfile());

  return { profile: data };
};

services/user.service.ts

import { instance } from '@/api/api.interceptor';
import { IUser } from '@/types/user.interface';

const USERS = 'users';

type TypeData = {
  username: string;
  email: string;
  avatar: string;
  banner: string;
};

export const UserService = {
  async getProfile() {
    // 修正返回类型为单个IUser，而非数组
    return instance<IUser>({
      url: `/${USERS}/@me`,
      method: 'GET',
    });
  },

  async updateProfile(data: TypeData) {
    // 如果更新接口也是返回单个用户，这里同样建议改成<IUser>
    return instance<IUser>({
      url: `/${USERS}/@me`,
      method: 'PUT',
      data,
    });
  },
};

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