XState事件参数类型报错：无法访问name属性如何解决？

问题核心：XState会自动将InitEvent（结构为{ type: 'xstate.init' }）加入状态机的事件联合类型中，你定义的InitializationEvent里的事件都带有name属性，但InitEvent没有，因此TypeScript提示name属性不存在。

以下是两种可行的解决方法：

方法一：在action中通过类型守卫缩小事件范围 #

先定义类型守卫函数，判断事件是否为你自定义的带name属性的事件：

// 你的自定义事件类型
type InitializationEvent = 
  | { type: 'FETCHED'; name: string }
  | { type: 'ERROR'; name: string }
  | { type: 'RESTART'; name: string };

// 类型守卫：判断事件是否为自定义的初始化相关事件
function isNamedInitializationEvent(event: any): event is InitializationEvent {
  return ['FETCHED', 'ERROR', 'RESTART'].includes(event.type);
}

// 在action中使用
const handleInitialization = (context, event: InitializationEvent | { type: 'xstate.init' }) => {
  if (isNamedInitializationEvent(event)) {
    doSomething(event.name); // TypeScript自动推断event带有name属性
  }
};

方法二：显式排除InitEvent类型 #

直接在action的事件类型中排除XState的InitEvent，确保只处理自定义事件：

import { InitEvent } from 'xstate';

type InitializationEvent = 
  | { type: 'FETCHED'; name: string }
  | { type: 'ERROR'; name: string }
  | { type: 'RESTART'; name: string };

// 排除InitEvent后的事件类型
type ValidInitializationEvent = Exclude<InitializationEvent | InitEvent, InitEvent>;

// 在action中使用该类型
const handleInitialization = (context, event: ValidInitializationEvent) => {
  doSomething(event.name); // 无TS错误，类型已确保event带有name属性
};

注意：如果action被绑定到状态机entry等会触发xstate.init事件的位置，方法二会导致类型不匹配，此时建议用方法一做类型判断。

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