React+TypeScript中e.target.files可能为null的报错求助

针对你遇到的问题，本质是TypeScript严格类型检查的约束：HTMLInputElement的files属性类型为FileList | null，直接访问e.target.files[0]会触发null警告，同时用户取消文件选择时files[0]也可能是undefined。以下是几种可靠的解决方式：

方案1：空值检查+可选链（推荐） #

在调用handleFileChosen前，先安全获取文件并判断其存在性，避免传递无效值：

return (
  <>
    <input
      type='file'
      onChange={(e) => {
        // 用可选链安全访问第一个文件，再判断是否存在
        const selectedFile = e.target.files?.[0];
        if (selectedFile) {
          handleFileChosen(selectedFile);
        }
      }}
    />
    <p>{fileContent}</p>
  </>
)

方案2：修改handleFileChosen的参数类型并内部处理 #

如果希望简化onChange回调，可以让handleFileChosen接受可选的文件参数，内部先做校验：

// 修改函数参数类型，允许null/undefined
const handleFileChosen = (file: File | null | undefined) => {
  // 若文件不存在，直接返回
  if (!file) return;
  
  let fileReader = new FileReader()
  fileReader.onloadend = (e: Event) => {
    const content = fileReader.result || ''
    setFileContent(content.toString())
  }
  fileReader.readAsText(file)
}

// onChange中用可选链直接传递
return (
  <>
    <input
      type='file'
      onChange={(e) => handleFileChosen(e.target.files?.[0])}
    />
    <p>{fileContent}</p>
  </>
)

方案3：非空断言（不推荐） #

如果你能确保用户一定会选择文件（比如有强制选择的前置逻辑），可以用非空断言!跳过类型检查，但这种方式不安全，用户取消选择时可能导致运行时错误：

<input
  type='file'
  onChange={(e) => handleFileChosen(e.target.files![0])}
/>

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