Redux Toolkit initialState不显示API数据、list类型为never[]问题

开发者阿泽

2026-8-28

问题根因

list属性被识别为never[]、dispatch后接口返回值无法正确存入数组，本质是TypeScript的类型推断机制导致的：
你在slice初始状态中给list赋值为空数组[]时，没有指定数组元素的具体类型，TypeScript会默认将无类型的空数组推断为never[]——该类型代表数组永远不能存入任何值，后续dispatch传入接口返回的用户数据时，会因为类型不匹配导致赋值失败。

修复步骤

1. 定义用户数据类型

根据接口返回的字段定义单条用户数据的TS接口：

interface User {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

2. 为slice状态声明明确类型

不要依赖TS对空数组的自动推断，手动标注state和action的类型：

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";

// 定义slice状态的整体类型
interface UserState {
  list: User[];
}

// 初始化状态时绑定类型
const initialState: UserState = {
  list: []
};

export const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    // 标注action.payload的类型为用户数组
    setUserList: (state, action: PayloadAction<User[]>) => {
      state.list = action.payload;
    }
  },
});

export const { setUserList } = userSlice.actions;
export default userSlice.reducer;

3. （推荐）补全异步thunk的类型

为异步请求函数的dispatch参数标注类型，避免后续调用时的类型报错，注意AppDispatch需要从你项目的store配置文件中导入：

// 替换为你项目中store文件的实际路径
import type { AppDispatch } from "../store";

export const fetchAllUsers = () => async (dispatch: AppDispatch) => {
  try {
    const res = await axios.get("https://reqres.in/api/users?page=2");
    dispatch(setUserList(res.data.data));
  } catch (err) {
    console.log(err);
  }
};