Vue3 TS SFC使用Enum报Cannot read property 'kind' of null错误

Cannot read property 'kind' of null 不是业务代码运行时抛出的错误，是构建链路中ESLint解析TypeScript语法树时的内部异常。堆栈里显示的Array.forEach是ESLint遍历AST节点的内置逻辑，和你写的业务代码无关。
触发该异常的具体原因有三个：

• 工具链版本兼容问题：项目内@typescript-eslint/parser与当前TS版本、vue-loader版本不匹配，碰到SFC顶层导出枚举、接口的代码结构时，解析器无法获取节点的类型标识，读取空值属性直接崩溃
• 代码存在隐性逻辑bug：switch分支里重复写了case "K"（分别对应骑士、国王两个棋子），没有和棋盘数组里的骑士标识"N"对应，就算构建不崩，运行逻辑也是错的
• 组件写法不规范：导入组件后用数组形式注册components: [Piece]，不符合Vue3的组件注册规范，进一步加重了解析器的兼容负担

1. 修正代码中的不规范写法 #

• 修复switch分支错误：把骑士对应的重复分支从case "K": return PieceType.Knight;改成case "N": return PieceType.Knight;，和棋盘数组里的棋子标识字符对齐
• 替换组件注册写法：把Board.vue里的数组形式注册改成Vue3要求的对象键值对格式：

  export default defineComponent({
    components: { Piece },
    // ...
  })
  

• 统一API导入来源：移除Board.vue中从@vue/composition-api导入defineComponent的代码，和Piece.vue保持一致，直接从vue包导入即可——Vue3原生支持组合式API，不需要额外安装兼容包

2. 绕开SFC的类型解析bug #

把原本写在Piece.vue顶层的枚举、接口定义全部抽到独立的TS文件中（比如新建src/types/piece.ts），将PieceType枚举、Piece接口、Position接口都迁移到这个独立文件里：

// src/types/piece.ts
export enum PieceType {
  None,
  Pawn,
  Rook,
  Knight,
  Bishop,
  Queen,
  King
}

export interface Piece {
  position: Position,
  type: PieceType,
}

export interface Position {
  row: number,
  col: number
}

回到Piece.vue组件中，直接从这个独立TS文件导入需要的枚举即可。这种写法是Vue3项目处理TS类型的推荐实践，也能彻底绕开vue-loader、ESLint对SFC脚本块中纯TS类型导出的兼容问题。

3. 编辑器提示与构建报错不一致的原因 #

VS Code的语法检查依赖内置的TypeScript语言服务，能正确识别枚举的语法正确性；但构建阶段走的是webpack链路的ESLint、vue-loader解析逻辑，两个解析器的版本能力不匹配，就会出现编辑器无报错、构建直接抛内部异常的情况。把纯类型定义从SFC里移出后，这类解析错误会直接消失。

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