React TypeScript Redux Toolkit Action返回类型的对象链式调用错误

问题重现 #

你定义了如下状态类型：

export type CardQuery = {
  title: string;
  description: string;
  photos: [];
};

export type InitialState = {
  cards: CardQuery[];
  isLoading: boolean;
  error: string;
};

然后用Redux Toolkit编写的reducer action代码：

reducers: {
    getCards: (state, { payload }: PayloadAction<InitialState>) => {
      return {
        ...state,
        cards: payload.data?.product.sales,
        isLoading: payload.loading,
      };
    },
  }, 

此时TypeScript抛出两个错误：

Property 'data' does not exist on type 'InitialState'.
Property 'loading' does not exist on type 'InitialState'. Did you mean 'isLoading'?ts(2551)

你疑惑：TypeScript为什么要关注payload的链式调用，而不是只校验返回的state结构？

问题核心原因 #

你搞反了PayloadAction泛型参数的作用：

• PayloadAction<T>里的T是当前action接收的payload的类型，不是你要更新的state类型。
• 你把InitialState传给了PayloadAction，TypeScript就会认定payload必须严格符合InitialState的结构——但你的代码里却访问了payload.data、payload.loading这些InitialState根本没有的属性，自然会报错。
• TypeScript的类型检查是全流程的：它不仅会校验你返回的state是否符合类型，还会校验你在代码中对所有变量（包括payload）的访问是否符合它们标注的类型，这是静态类型检查的核心逻辑。

解决方案 #

1. 定义正确的Payload类型 #

先创建一个和action实际接收的payload结构匹配的类型：

export type GetCardsPayload = {
  data: {
    product: {
      sales: CardQuery[]; // 和state中cards的类型对齐
    };
  };
  loading: boolean;
};

2. 修正PayloadAction的泛型标注 #

把PayloadAction<InitialState>换成PayloadAction<GetCardsPayload>，确保TypeScript能正确校验payload的结构：

reducers: {
  getCards: (state, { payload }: PayloadAction<GetCardsPayload>) => {
    return {
      ...state,
      cards: payload.data.product.sales,
      isLoading: payload.loading,
    };
  },
},

这样修改后，TypeScript既会校验你对payload的访问是否合法，也会确保最终返回的state符合InitialState的类型要求，报错自然会消失。

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