已对event做空值检查 为何代码仍报Object is possibly 'null'错误

你写的非空判断只校验了event本身，但本次报错的触发源是event.currentTarget属性，该属性的原生类型定义本身就允许为null，和event是否非空没有关联。

TS的类型系统对事件对象的属性做了最保守的类型推断：事件回调执行完毕后currentTarget会被浏览器重置为null，哪怕你当前是同步访问该属性，TS也会默认判定它存在为null的可能性。另外你当前的代码还有一个隐含问题：默认Event类型的currentTarget上没有files属性，需要手动指定为文件上传输入框的DOM类型。

以下是可行的解决方案：

• 方案1：加非空断言（适合确定当前场景currentTarget一定存在的情况，写法最简洁）

const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  event.preventDefault();
  // 非空断言! 告诉TS currentTarget一定不为null
  const selectedFile = event.currentTarget!.files?.[0];
  if (selectedFile) {
    setFieldValue("photo", selectedFile);
  }
};

• 方案2：新增非空判断（更严谨，无运行时风险）

const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  event.preventDefault();
  const target = event.currentTarget;
  if (target?.files?.length) {
    const selectedFile = target.files[0];
    setFieldValue("photo", selectedFile);
  }
};

如果是原生JS环境的事件监听，把事件参数类型换成Event后，访问属性前强转为HTMLInputElement类型即可。

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