TypeScript严格模式下文件输入onChange报Object is possibly null错误

这个问题我之前也碰到过，本质是TypeScriptstrict模式里的strictNullChecks规则在起作用——开启这个规则后，TS会严格校验所有可能为null或undefined的值，而event.target.files本身是FileList | null类型，直接取[0]自然会被判定为可能是null，所以抛出了这个错误。

下面给你几个靠谱的解决方案，按推荐程度排序：

1. 用可选链+条件判断（最推荐） #

可选链?.会在左侧值为null/undefined时直接返回undefined，避免报错。再配合条件判断，还能处理用户取消选择文件的场景：

const handleInputOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFile = event.target.files?.[0];
  // 只有选中文件时才更新状态
  if (selectedFile) {
    setFile(selectedFile);
    setFileName(selectedFile.name);
  }
};

这种写法既符合TS的类型规范，又能避免潜在的运行时错误，非常稳妥。

2. 显式添加类型守卫 #

通过条件判断明确files和files[0]不为空，让TypeScript自动缩小类型范围，消除报错：

const handleInputOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const files = event.target.files;
  // 先检查files存在且有文件
  if (files && files.length > 0) {
    const selectedFile = files[0];
    setFile(selectedFile);
    setFileName(selectedFile.name);
  }
};

这种方式逻辑更直观，适合需要在无文件时做额外处理（比如提示用户）的场景。

3. 非空断言（谨慎使用） #

如果你能100%确定用户一定会选择文件（比如通过按钮点击触发输入框，且流程上必须选文件），可以用!断言值不为空：

const handleInputOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setFile(event.target.files![0]);
  setFileName(event.target.files![0].name);
};

⚠️ 提醒：这个方法有风险，如果实际场景中files[0]可能为null（比如用户取消选择），会导致运行时错误，所以非必要别用。

至于关闭strict模式错误就消失，是因为strict模式默认包含了strictNullChecks规则，关闭后TS会忽略null和undefined的类型校验，但这不是长久之计——严格模式能帮你提前发现很多潜在问题，建议尽量保留strict模式，用上面的方法解决错误。

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