TypeScript解构报错：块级变量未声明前不可使用及forEach查找失败问题

第一个报错（带外层括号时） #

这是自动分号插入（ASI）导致的语法解析错误。你前面的解构赋值语句末尾没有加半角分号，JavaScript引擎会把后面的括号(...)解析成函数调用，试图把前面的pageCollection当作函数来执行——但此时pageCollection还处于解构赋值的声明阶段，还没完成初始化，所以触发了“变量未声明就使用”的错误。

错误代码场景：

const {
  data: { pageCollection }
} = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS })

// 无分号，括号被解析为函数调用
( [...(pageCollection?.items ?? [])].forEach((page) => {
  console.log('PAGEEE', page)
}))

第二个报错（移除外层括号后） #

依旧是ASI的问题。前面的解构赋值语句没加分号，后面的数组字面量[...(pageCollection?.items ?? [])]会被引擎误认为是前面await apolloClient.query(...)表达式的一部分（比如被当成函数参数或成员访问），导致TypeScript无法识别这是一个数组实例，自然找不到数组的forEach方法，所以报错“找不到forEach”。

错误代码场景：

const {
  data: { pageCollection }
} = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS })

// 无分号，数组字面量被合并到前面的表达式中
[...(pageCollection?.items ?? [])].forEach((page) => {
  console.log('PAGEEE', page)
})

解决办法 #

在解构赋值语句的末尾加上半角分号，切断前后表达式的关联即可：

const {
  data: { pageCollection }
} = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS }); // 添加分号

[...(pageCollection?.items ?? [])].forEach((page) => {
  console.log('PAGEEE', page)
})

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