Next.js 13中useState报错求助：TypeError提示不可迭代

错误原因 #

你遇到的错误是因为代码中的泛型注解<Boolean>被解析成了比较运算符（<和>），而非TypeScript的泛型语法，导致useState < Boolean > false被当作比较表达式，返回结果不是可解构的数组，因此无法执行数组解构赋值。

修复步骤 #

• 检查文件扩展名：确保组件文件后缀为.tsx（React组件文件）或.ts（TypeScript脚本文件）。如果是.js或.jsx文件，TypeScript泛型语法会被识别为普通比较操作，触发该错误。
• 规范类型注解写法：将Boolean改为TypeScript原生的小写boolean类型，这是更符合TS规范的用法：

  const [ productShow, setProductShow ] = useState<boolean>(false);
  

• 验证TS配置：若文件扩展名正确仍报错，检查项目根目录的tsconfig.json，确保jsx配置项为"preserve"或"react-jsx"（Next.js 13默认配置已满足此要求），保证TypeScript能正确解析JSX中的泛型语法。

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