嵌套解构含Maybe类型对象时获取positionEvents的TS报错问题

类型定义 #

自动生成的GraphQL查询类型如下：

export type MatchLivePlayerType = {
  __typename?: 'MatchLivePlayerType';
  playbackData?: Maybe<MatchPlayerLivePlaybackDataType>;
};

export type MatchPlayerLivePlaybackDataType = {
  __typename?: 'MatchPlayerLivePlaybackDataType';
  positionEvents?: Maybe<Array<Maybe<MatchLivePlayerPositionDetailType>>>;
};

export type MatchLivePlayerPositionDetailType = {
  __typename?: 'MatchLivePlayerPositionDetailType';
  time: Scalars['Int'];
  x: Scalars['Int'];
  y: Scalars['Int'];
};

数据示例 #

接口返回的实际数据示例：

{
  "heroId": 93,
  "playbackData": {
    "positionEvents": [
      {
        "y": 85,
        "x": 173,
        "time": 31
      }
    ]
  }
}

报错信息 #

尝试通过嵌套解构获取positionEvents并设置默认值时，出现TypeScript错误：

Property 'positionEvents' does not exist on type 'Maybe'

当前代码实现 #

我的代码写法如下：

const defaultPositionEvents = {
  positionEvents: [
    {
      y: 0,
      x: 0,
      time: 0
    }
  ]
}
const { heroId, isRadiant, playbackData: { positionEvents } = defaultPositionEvents as MatchPlayerLivePlaybackDataType } = player;

解决方案 #

问题核心是playbackData的类型为Maybe<MatchPlayerLivePlaybackDataType>，即它可能是undefined或null，TypeScript不允许直接解构可能不存在的对象属性。正确做法是先给playbackData本身设置默认值，再解构其内部的positionEvents，同时给positionEvents也设置默认值（因为它本身也是可选类型）：

const defaultPositionEvents = {
  positionEvents: [
    { y: 0, x: 0, time: 0 }
  ] as const
};

const { 
  heroId, 
  isRadiant, 
  // 先给playbackData设置默认值，确保解构时对象存在
  playbackData: { 
    // 给positionEvents设置默认值，避免拿到undefined
    positionEvents = defaultPositionEvents.positionEvents 
  } = defaultPositionEvents 
} = player;

关键说明 #

1. 先给playbackData指定默认值defaultPositionEvents，当playbackData为undefined时自动使用默认对象，解决解构时对象不存在的类型报错。
2. 由于positionEvents本身是Maybe类型（可选或可能为null），给它设置默认值可以确保最终拿到的一定是符合要求的数组。
3. as const能让defaultPositionEvents的类型更精确，无需额外类型断言。

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