TypeScript类型识别异常：为何非数组类型被误判为数组？

为啥会出这问题 #

你的代码里有两个关键问题搞懵了TypeScript：

1. 语法写错了：map的回调参数没加括号，写成friends.map(friend) => ...，正确得写成friends.map((friend) => ...)。这语法错误直接让TypeScript认错了代码结构，把friend当成数组本身，而不是数组里的单个元素。
2. 类型没处理空值：Friends类型是Array<{id: string}> | null | undefined，直接调用map时，TypeScript拿不准friends到底是不是数组，既没法正确推断元素类型，还会担心你调用空值的方法。

怎么修复 #

1. 先把map的语法改对 #

给回调参数加上括号，让TypeScript能正确识别数组元素：

const MyComponent = (friends: Friends) => {
  return (
    <>{friends?.map((friend) => <div key={friend.id}>{friend.id}</div>)}</>
  )
}

（顺便提一句，React循环渲染要加key属性，不然会有警告）

2. 明确元素类型（可选，让代码更清晰） #

单独把朋友元素的类型提出来，避免TypeScript推断混乱：

// 先定义单个朋友的类型
export type Friend = {
  id: string
}

export type MyFragment = {
  __typename?: "MyFragment"
  age: string
  friends?: Array<Friend> | null
}

// 再取friends的类型
type Friends = MyFragment["friends"]

3. 确保调用map时friends是数组 #

两种常用方式：

• 可选链写法（最省事）：用?.跳过friends为null或undefined的情况，直接不执行map

friends?.map((friend) => <div key={friend.id}>{friend.id}</div>)

• 类型守卫写法：先判断friends不是空值，再执行map

const MyComponent = (friends: Friends) => {
  if (!friends) return null
  return (
    <>
      {friends.map((friend) => <div key={friend.id}>{friend.id}</div>)}
    </>
  )
}

改完之后，TypeScript就能正确识别friend是带有id属性的对象，不会再乱报“id不存在”，也不会把friend当成数组了。

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