GraphQL查询报错：TypeError: Cannot read property 'Flavor' of undefined

首先，这个错误的核心原因很明确：你在尝试访问data.Flavor的时候，data本身是undefined——大概率是因为GraphQL查询还在加载过程中，初始阶段data还没有拿到返回值。咱们一步步来解决：

1. 先处理data的undefined状态 #

直接访问data.Flavor会在data未加载完成时报错，你可以用可选链操作符（?.）或者条件判断来规避：

React.useEffect(() => {
  // 用可选链安全访问，同时兜底为空数组
  setFlavorsList(data?.Flavor || []);
}, [data])

2. 完善类型定义，避免类型不匹配 #

你只定义了Flavor接口，但GraphQL返回的是嵌套在data对象里的结构，最好把整个返回数据的类型也明确下来：

interface Flavor {
  flavorId: string;
  name: string;
}

// 定义GraphQL返回的完整结构，标记可能为undefined的字段
interface FlavorQueryResponse {
  data?: {
    Flavor?: Flavor[];
  };
}

这样后续使用data的时候，TypeScript会提示你它可能是undefined，避免粗心的错误。

3. 优化状态初始化 #

把状态的初始值设为空数组，而不是undefined，这样后续渲染组件的时候，你不需要额外判断flavorsList是否存在：

const [flavorsList, setFlavorsList] = React.useState<Flavor[]>([])

关于可索引类型的疑问 #

你提到的可索引类型，其实更适合处理动态键名的场景——比如你的GraphQL查询可能返回不同名称的数组（比如有时候是Flavor，有时候是Drink）。这种情况下可以这么定义：

interface DynamicGraphQLResponse {
  data?: {
    [key: string]: Flavor[]; // 任意字符串键对应Flavor数组
  };
}

但回到你的问题，键名是固定的Flavor，所以完全不需要用可索引类型，只要把上面的步骤做好就能解决问题。

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