升级依赖后NextJS部署Vercel遇TypeScript错误，本地无异常求因

• 尽管Stack Overflow上有类似标题的问题，但此问题并非重复，推测是近期依赖包或Vercel平台的变更导致的。
• 今日对开发中的应用完成依赖包升级，变更后的依赖清单如下：

"dependencies": {
    "next": "^13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "^13.2.3",
    "typescript": "4.9.5"
  }

• 升级后，将相同代码部署至Vercel时出现大量新增lint错误，示例如下：

Type error: 'supplierId' is possibly 'undefined'.
  56 | 
  57 |   // Get Supplier Products
> 58 |   const supplierProductsQuery = trpc.supplierProducts.get.useQuery({supplier_id: supplierId}, { enabled: supplierId > 0, ...refetchNever });

• 这段代码逻辑合理：已知supplierId可能为undefined，因此将其作为查询启用的判断条件。但本地运行next dev、next lint和next build均无任何错误，Vercel上的检查却突然变得更严格，或是使用了不同的lint规则。

1. 本地与Vercel的TypeScript配置/版本不一致 #

Vercel部署环境可能默认启用了更严格的TypeScript编译选项，比如你的本地tsconfig.json中可能未开启strictNullChecks，但云端环境自动启用了该规则；或者Vercel使用的TypeScript版本与本地存在差异，导致类型检查逻辑不同。

2. 依赖版本的"^"导致云端安装更高版本 #

你依赖中的next和eslint-config-next使用了^13.2.3版本标识，这意味着npm/yarn在云端构建时可能安装了13.2.3以上的兼容小版本，而这些新版本可能调整了lint规则或TypeScript检查逻辑，本地则因缓存仍使用旧版本，导致规则不一致。

3. Vercel构建缓存异常 #

Vercel的构建缓存可能残留了旧的依赖或配置文件，导致依赖升级后，云端环境未完全刷新，触发了异常的检查行为。

对应解决方案 #

• 锁定依赖版本：将next和eslint-config-next的版本从^13.2.3改为固定版本13.2.3，避免云端自动安装更高版本。
• 统一TS配置：检查本地tsconfig.json，显式设置strict: true等严格模式选项，确保本地与云端的TypeScript检查规则一致。
• 清除Vercel缓存：在Vercel项目的构建设置中手动清除构建缓存，重新触发完整构建。
• 显式处理undefined：虽然逻辑上enabled条件能过滤undefined，但TypeScript可能无法识别该类型保护，可以添加类型断言supplierId!，或根据业务逻辑用supplierId ?? 默认值处理，消除类型错误。

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