TypeScript验证失效：自定义Hook返回的可选数组未触发错误

以下是几种常见的原因及对应说明：

• TypeScript严格模式未启用
  若你的tsconfig.json中strict配置为false，或单独关闭了strictNullChecks，TypeScript会跳过undefined和null的类型校验。这种情况下，即便posts是undefined，调用posts.map也不会触发预期的类型错误。解决方式是在配置中开启严格模式：

  {
    "compilerOptions": {
      "strict": true
    }
  }
  

• VS Code的TypeScript版本与项目不一致
  VS Code默认使用内置的TypeScript版本，若项目本地安装的版本和内置版本差异较大，可能导致类型检查逻辑不统一。可以通过VS Code状态栏切换版本：点击右下角的TypeScript版本号，选择"Use Workspace Version"（使用工作区版本）。

• 代码中存在隐式类型守卫
  React Query的useQuery返回isLoading、isSuccess等状态标识，如果你在代码中先判断了这些状态，TypeScript会自动窄化data的类型。比如：

  const { data: posts, isLoading } = usePosts();
  if (isLoading) return <div>加载中...</div>;
  // 此时TypeScript判定posts必然是Post[]，不会提示undefined
  return posts.map(post => <div key={post.id}>{post.title}</div>);
  

  这种情况属于正常的类型推断，并非验证失效。

• React Query版本或类型定义存在问题
  若你使用的@tanstack/react-query版本存在类型定义bug，可能导致data的类型被错误推断为非可选类型。可以尝试升级到最新版本：

  npm update @tanstack/react-query
  

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