Type 'unknown'无法分配给WritableDraft<{}>|WritableDraft<User>报错解决

报错原因 #

你遇到的类型错误核心原因是用createAsyncThunk创建异步方法时没有指定返回值的TS类型，导致TS默认推断异步成功后的payload为unknown类型，无法直接赋值给已经声明了User | {}类型的state.user字段。

修复步骤 #

1. 给异步Thunk添加泛型声明 #

在auth.actions.ts文件中，给每一个用createAsyncThunk创建的异步方法指定返回值类型、入参类型：

import { createAsyncThunk } from '@reduxjs/toolkit';
import { User, LoginData, CreateAccountData } from '../../../model/users-model';

// 加载当前用户：返回User类型，无入参
export const loadCurrentUser = createAsyncThunk<User, void>(
  'auth/loadCurrentUser',
  async (_, { rejectWithValue }) => {
    try {
      // 原有请求逻辑，确保返回值符合User类型定义
      const res = await fetch('/api/user/current');
      return res.json() as User;
    } catch (err) {
      return rejectWithValue('加载用户信息失败');
    }
  }
);

// 登录：返回User类型，入参为LoginData类型
export const login = createAsyncThunk<User, LoginData>(
  'auth/login',
  async (loginData, { rejectWithValue }) => {
    try {
      // 原有登录请求逻辑
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(loginData)
      });
      return res.json() as User;
    } catch (err) {
      return rejectWithValue('账号或密码错误');
    }
  }
);

// 注册账号：返回User类型，入参为CreateAccountData类型
export const CreateAccount = createAsyncThunk<User, CreateAccountData>(
  'auth/createAccount',
  async (accountData, { rejectWithValue }) => {
    // 原有注册请求逻辑
  }
);

// 登出：无返回值，无入参
export const logout = createAsyncThunk<void, void>(
  'auth/logout',
  async (_, { rejectWithValue }) => {
    // 原有登出请求逻辑
  }
);

2. （可选优化）调整AuthState的user字段类型 #

原有定义user: {} | User的兼容性较差，推荐调整为Partial<User>，既兼容初始值为空对象的写法，也符合字段的实际使用逻辑：

// users-model.ts中修改AuthState定义
export interface AuthState {
    status: Status;
    isAuthenticated: boolean;
    error: string;
    user: Partial<User>; // 替换原有 {} | User 定义
}

（应急临时方案）手动断言payload类型 #

如果暂时不想修改thunk的定义，可以在extraReducers中给payload手动加类型断言，不推荐长期使用：

builder.addCase(loadCurrentUser.fulfilled, (state, { payload }) => {
    state.isAuthenticated = true;
    state.status = 'resolved';
    state.user = payload as User; // 手动指定payload类型
});

完成以上修改后，unknown类型不匹配的报错就会消失。

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