能否在Gatsby GraphQL Typegen中使用TypeScript泛型接口？

你的问题核心在于泛型没有和组件的type属性建立关联，导致TypeScript无法在分支判断中推断出data的具体结构。下面是修正后的实现方案：

1. 定义带判别式的联合类型 #

放弃宽泛的泛型接口，改用带判别式的联合类型，将type字符串与对应的GraphQL数据类型绑定：

// 替换原来的CarouselInterface
type CarouselProps = 
  | { type: "type1"; data: Queries.Type1Fragment }
  | { type: "type2"; data: Queries.Type2Fragment };

2. 重构组件逻辑 #

组件不再需要泛型，直接接收上述联合类型的props。TypeScript会通过type这个判别式，自动推断出每个分支中data的具体类型：

export default function Carousel(props: CarouselProps) {
  if (props.type === "type1") {
    // 此处props.data自动推断为Queries.Type1Fragment
    return props.data.nodesType1.map((node) => (
      <Type1 node={node} key={node.id} />
    ));
  } else if (props.type === "type2") {
    // 此处props.data自动推断为Queries.Type2Fragment
    return props.data.nodesType2?.map((node) => (
      <Type2 node={node} key={node.id} />
    ));
  }

  return null;
}

关键说明 #

• 原来的泛型TypeQuery没有任何约束，TypeScript无法确定它包含nodesType1或nodesType2属性，因此报错。
• 联合类型中的type字段作为判别式，让TypeScript能精准识别不同分支下的data类型，解决类型推断问题。
• 后续扩展新类型时，只需在CarouselProps中添加新的联合成员即可，比如：| { type: "type3"; data: Queries.Type3Fragment }。

另外注意：你原来的代码中直接使用data会导致变量未定义错误，必须通过props.data访问传入的数据。

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