如何解决TypeScript中null与string无法赋值给Blob类型参数的错误

错误1：Argument of type 'string' is not assignable to parameter of type 'Blob' #

原因 #

你将file状态的类型定义为string，但e.target.files[0]返回的是File类型（属于Blob的子类），且FileReader.readAsDataURL()要求的参数是Blob/File，并非字符串，类型不匹配导致报错。

解决方法 #

• 将useState<string>("")改为useState<File | null>(null)，把状态类型修正为File或null，初始值设为null而非空字符串
• useEffect中的空值判断逻辑保持不变，if (!file)依然能正确识别null状态

错误2：e.target.files is possibly 'null' #

原因 #

当文件输入框未选择任何文件时，e.target.files可能为null，直接通过[0]索引取值会触发空值安全检查报错。

解决方法 #

在onChange事件中先判断e.target.files是否存在且包含文件，再执行赋值操作：

const selectedFile = e.target.files?.[0];
if (selectedFile) {
  setFile(selectedFile);
}

完整修正代码 #

import { useState, useEffect, useReducer } from 'react';

// 定义组件Props类型，避免隐式any报错
interface ImageLoaderProps {
  image: string;
  callback: (image: string) => void;
  size: string | number;
}

// 定义ImageCroper组件的Props类型（根据实际组件逻辑调整）
interface ImageCroperProps {
  image: string | ArrayBuffer | null;
  setCropedImage: (image: string) => void;
}

// 示例ImageCroper组件（根据实际实现替换）
const ImageCroper = ({ image, setCropedImage }: ImageCroperProps) => {
  return <div>图片裁剪器</div>;
};

function ImageLoader({ image, callback, size }: ImageLoaderProps) {
  // 修正file状态类型
  const [file, setFile] = useState<File | null>(null);
  // 明确result的类型，替代any
  const [result, setResult] = useState<string | ArrayBuffer | null>(null);
  // 修正拼写错误：toogleCrop → toggleCrop
  const [crop, toggleCrop] = useReducer((currCrop) => !currCrop, false);
  const [imageState, setImage] = useState(image);

  useEffect(() => {
    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.onloadend = () => {
      setResult(reader.result);
      toggleCrop();
    };
    reader.readAsDataURL(file);
  }, [file]);

  return (
    <>
      <label
        className="logo"
        style={{
          width: size,
          height: size,
          backgroundSize: 'cover',
          backgroundImage: `url(${imageState})`
        }}
      >
        <input
          type="file"
          accept="image/*"
          style={{ display: "none" }}
          onChange={(e) => {
            e.preventDefault();
            // 空值安全判断后再赋值
            const selectedFile = e.target.files?.[0];
            if (selectedFile) {
              setFile(selectedFile);
            }
          }}
        />
      </label>
      {crop ? (
        <ImageCroper
          image={result}
          setCropedImage={(newImage) => {
            setImage(newImage);
            toggleCrop();
            callback(newImage);
          }}
        />
      ) : null}
    </>
  );
}

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