使用Redux-Toolkit遇TypeScript报错：User[]类型无accessToken属性

首次使用TypeScript编写Redux-Toolkit的createAsyncThunk函数，解决之前的错误后遇到新问题：VS Code标记accessToken并提示“属性accessToken不存在于类型User[]上.ts(2339)”。已尝试在User接口中添加该属性但未解决，同时疑惑无TypeScript时代码可正常运行。

相关代码 #

createAsyncThunk实现代码 #

type AsyncThunkConfig = {
    state: RootState
}
export const createCardImage = createAsyncThunk<object, object, AsyncThunkConfig>('cardImages/create', async (cardImagesData, thunkAPI)=>{
    try{
    const token = thunkAPI.getState().auth.user!.accessToken;
        return await cardImagesService.createCardImages(cardImagesData, token);
    }catch (error:any) {
        const message =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString()
        return thunkAPI.rejectWithValue(message as string)
      }
})

Auth初始状态与类型定义代码 #

const user = JSON.parse(localStorage.getItem('user') || '');
interface User {
  vorname:string;
  nachname:string;
  username:string;
  email:string;
  street:string;
  number:string;
  plz:number;
  city:string;
  password:string;
  isAdmin:boolean;
  createdAt: Date;
  accessToken?:string;
}
interface InitialState{
  user:User[] | null;
  isLoading:boolean;
  isSuccess:boolean;
  isError:boolean;
  message: string;
  auth?:boolean;
}
const initialState: InitialState = {
    user: user ? user : null,
    isLoading:false,
    isSuccess:false,
    isError:false,
    message:"",
};

不含extraReducers的Auth Slice代码 #

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers:{
        reset: (state)=>{
            state.isLoading = false;
            state.isSuccess = false;
            state.isError = false;
            state.message = "";
        },
    },

问题原因与解决办法 #

核心原因 #

InitialState中user的类型被错误定义为User[] | null（用户数组或null），但实际业务逻辑里user应该是单个用户对象，而非数组。TypeScript严格校验类型，因此会阻止你从数组类型上访问单个对象的accessToken属性。

解决步骤 #

1. 修正InitialState的user类型
   将InitialState中的user:User[] | null;修改为user:User | null;：

   interface InitialState{
     user:User | null; // 从User[]改为User
     isLoading:boolean;
     isSuccess:boolean;
     isError:boolean;
     message: string;
     auth?:boolean;
   }
   

2. 校验localStorage取值逻辑
   确保localStorage中存储的是单个用户对象而非数组。如果之前错误存储了数组，可以调整取值逻辑：

   const storedUser = JSON.parse(localStorage.getItem('user') || 'null');
   // 若存储的是数组，取第一个元素作为当前用户
   const user = Array.isArray(storedUser) ? storedUser[0] : storedUser;
   

为什么无TypeScript时能运行？ #

JavaScript是弱类型语言，不会做静态类型校验——只要运行时user对象上存在accessToken属性，代码就能正常执行。但TypeScript会提前校验类型匹配性，发现你试图从数组类型访问单个对象属性时，直接抛出错误。

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