使用GraphQL生成类型时TS报错Property '0'不存在如何修复

这个类型错误的根源是链式提取嵌套类型时，没有处理GraphQL代码生成工具输出类型自带的可空标记：
从生成的PlayerListQuery类型可以看到，edges字段是可选属性，最终类型为Array<{...}> | null | undefined，并非确定存在的数组。TS不允许在可能为null/undefined的值上直接访问索引[0]，因此抛出2339错误。
另外你用[0]提取数组元素类型的写法也不规范：TS中提取数组所有成员的联合类型应该用[number]索引，硬写[0]会被TS判定为你要访问数组上固定存在的第0项属性，对可能为空的数组类型来说这个访问本身就不合法。

方案1：类型安全写法（推荐） #

用TS内置的NonNullable工具类型逐层剥离每层的null/undefined类型，再通过[number]提取数组成员类型，全程不丢失类型安全：

<script lang="ts">
  import type { PlayerListQuery } from "queries";

  // 先剥离edges的空值，拿到确定数组类型后提取数组成员（Edge类型）
  type PlayerEdge = NonNullable<NonNullable<PlayerListQuery["playerList"]["edges"]>[number]>;
  // 再剥离edge上node字段的空值，得到最终的player类型
  export let player: NonNullable<PlayerEdge["node"]>;
</script>

如果你的业务逻辑里player本身允许为空，最后一层包裹player类型的NonNullable可以去掉，保留生成类型自带的可空标记即可。

方案2：非空断言快速绕过（不推荐） #

如果业务逻辑能100%保证playerList.edges一定存在、数组至少有1个元素、node字段一定非空，可以用TS的非空断言操作符!跳过类型检查，写法更简洁但会丢失类型安全，运行时如果实际数据为空会直接抛出错误：

export let player: PlayerListQuery["playerList"]["edges"]![0]!["node"]!;

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