React Query+Axios获取Todo数组报错：Property 'map'不存在于类型'never'

1. 确保fetchTodos函数正确返回数据 #

你的axios.get<Todo[]>虽然指定了响应类型，但如果函数没有返回response.data，会导致返回值类型错误（比如void）。修正后的函数应该明确返回Todo数组：

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

const fetchTodos = async (): Promise<Todo[]> => {
  const response = await axios.get<Todo[]>('https://jsonplaceholder.typicode.com/todos');
  // 必须返回响应中的data字段，而非整个AxiosResponse对象
  return response.data;
};

2. 给useQuery显式指定泛型类型 #

React Query默认会根据fetch函数推断类型，但显式指定泛型可以避免类型歧义，同时明确错误类型：

import { useQuery } from '@tanstack/react-query';

const { data: todos, isLoading, error } = useQuery<Todo[], Error>(
  ['todos'], // 查询键
  fetchTodos
);

3. 处理数据加载/错误/空值状态 #

即使fetch逻辑正确，React Query在初始加载阶段data会是undefined，必须先判断数据存在再调用map，否则会触发类型错误：

// 加载中状态
if (isLoading) {
  return <div>加载中...</div>;
}

// 错误状态
if (error) {
  return <div>请求失败：{error.message}</div>;
}

// 数据为空或未定义的情况
if (!todos) {
  return <div>暂无Todo数据</div>;
}

// 渲染Todo列表
return (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        {todo.completed ? <s>{todo.title}</s> : todo.title}
      </li>
    ))}
  </ul>
);

4. 检查TypeScript严格模式配置 #

如果项目启用了TypeScript严格模式，确保tsconfig.json中相关配置正常，比如strictNullChecks开启时，必须严格处理undefined类型的情况——这也是触发"Query data cannot be undefined"提示的核心原因，做好状态判断即可解决。

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