TypeScript无法为payload推断正确类型，访问id属性报错

问题根源 #

你当前的Action类型是一个宽泛的单一对象类型，type字段为通用string，payload是Subject | Subject[]联合类型。TypeScript无法建立action.type与payload具体类型的关联关系——它不知道当type为"REMOVE_SUBJECT"时，payload必然是Subject类型，因此会认为payload仍可能是数组（而数组没有id属性），从而抛出类型错误。

解决方案 #

将Action定义为区分联合类型，让每个type对应明确的payload类型，这样TypeScript就能在switch的每个分支中精准推断payload的类型：

const initialState = [] as Subject[];

// 拆分为具体action类型的联合
type Action = 
  | { type: "SET_SUBJECTS"; payload: Subject[] }
  | { type: "ADD_SUBJECT"; payload: Subject }
  | { type: "REMOVE_SUBJECT"; payload: Subject };

const reducer = (state: Subject[] = initialState, action: Action) => {
    switch (action.type) {
        case "SET_SUBJECTS":
            return action.payload;
        case "ADD_SUBJECT":
            return [...state, action.payload];
        case "REMOVE_SUBJECT":
            return state.filter((subject) => subject.id !== action.payload.id);
        default:
            return state;
    }
};

说明 #

修改后的Action类型通过type字段作为区分标志，将每个动作的类型与对应的payload类型绑定。TypeScript会在switch的每个case分支中自动识别当前payload的具体类型，既满足业务对不同payload类型的需求，也解决了类型访问错误的问题。

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