Next.js TypeScript项目toLowerCase运行时错误及编译检测疑问

为什么yarn build没检测到这个错误？ #

• React Strict Mode（reactStrictMode: true）仅负责检测React组件的副作用、过时API使用等问题，和TypeScript的类型检查是完全独立的机制，不会拦截变量可能为undefined的情况。
• 若你给email的类型标注为string，TypeScript会默认认定它永远是字符串，不会检测到运行时可能出现的undefined。只有当你显式将类型定义为string | undefined，且开启严格类型检查规则时，TypeScript才会在编译阶段提示错误。

如何在编译阶段捕获这类潜在问题？ #

• 严格配置tsconfig.json的类型检查规则：
  • 开启"strict": true：启用所有严格类型检查选项，包括strictNullChecks——强制要求处理null和undefined类型。
  • 确保"noImplicitAny": true：禁止变量隐式使用any类型，避免因类型模糊导致检查遗漏。
• 给变量标注准确类型：将email的类型定义为string | undefined，让TypeScript明确它可能为undefined，此时调用toLowerCase()会直接在编译阶段报错。

正确处理该错误的几种方案 #

• 可选链+空值合并（推荐）：既避免报错，又能保证最终为字符串类型：

  email = email?.toLowerCase() ?? '';
  

• 前置判断：显式检查变量类型后再执行逻辑：

  if (typeof email === 'string') {
    email = email.toLowerCase();
  } else {
    // 根据业务需求处理，比如设为空字符串或抛出错误
    email = '';
  }
  

• 非空断言（谨慎使用）：若能绝对保证email不会是undefined，可使用!跳过检查，但一旦运行时出现undefined，仍会触发报错：

  email = email!.toLowerCase();
  

内容的提问来源于stack exchange，提问作者János