React Query使用useQuery报无法作为JSX组件类型错误

报错的核心是违反了React的基础命名与使用约定：

• React 规定以use开头的函数是自定义Hook，只能在组件或其他Hook的顶层作用域调用，不能作为JSX组件渲染
• 只有首字母大写、返回合法JSX/ReactElement的函数才会被识别为可渲染组件

你封装的逻辑本质是自定义React Query Hook，但你将它命名为UsePropertiesCount（首字母大写），且大概率直接把它当做组件写在JSX中以<UsePropertiesCount />形式渲染，TypeScript检测到该函数返回的是UseQueryResult查询结果对象，不包含JSX元素必需的type/props/key属性，因此抛出类型错误。

你代码中useQuery的泛型定义、select字段做长度转换的逻辑本身没有问题。

1. 调整自定义Hook命名，符合Hook命名规范：将函数名从UsePropertiesCount改为usePropertiesCount（首字母小写，保持use前缀）
2. 不要将该Hook作为组件渲染，在需要使用房产条数的业务组件顶层调用它，从返回结果中取值使用

修正后的Hook代码：

async function fetchProperties(): Promise<Property[]> {
  return axios
    .get("http://127.0.0.1:3000/api/v1/properties")
    .then((res) => res.data);
}

// 符合Hook命名规范
export default function usePropertiesCount() {
  return useQuery<Property[], Error, number>("properties", fetchProperties, {
    select: (properties: Property[]) => properties.length,
  });
}

业务组件中的正确调用示例：

function PropertyStats() {
  // 顶层调用Hook获取数据
  const { data: totalCount, isLoading, error } = usePropertiesCount();

  if (isLoading) return <span>加载中...</span>;
  if (error) return <span>加载失败：{error.message}</span>;
  return <span>房产总记录数：{totalCount}</span>;
}

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