React+TypeScript使用FileReader报对象可能为null错误

使用type="file"的input元素实现JSON文件上传功能时，调用FileReader的onload环节TypeScript抛出错误：

Cannot invoke an object which is possibly 'null'（无法调用可能为null的对象）

原始出错代码如下：

const UploadCharacter = () => {
    const [data, setData] = useState<any>();

    const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const fileReader = new FileReader(); 
            fileReader.readAsText(e.target.files[0], 'UTF-8')
            fileReader.onload((e) => {  <-- 错误抛出位置
                console.log(e.target.result)
            })
        }


    }
    return (
        <div className={s.upload}>
            <input
                className={s.uploadInput}
                type="file"
                onChange={handleUpload}
            />
        </div>
    )
}

触发错误有两个核心点：

• API使用方式错误：FileReader.onload是事件回调属性，不是可直接执行的方法，正确用法是给该属性赋值回调函数，而非将回调作为入参直接调用onload()
• TypeScript类型约束：TS内置的DOM类型定义中，FileReader.onload的类型为((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null，初始值为null，直接调用一个可能为null的值就会触发该类型报错。

方案1：修正onload赋值写法（推荐） #

给onload属性直接绑定回调，同时做好空值收窄，兼容TS类型校验：

const UploadCharacter = () => {
    const [data, setData] = useState<any>();

    const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const fileReader = new FileReader(); 
        fileReader.readAsText(file, 'UTF-8');
        // 直接给onload属性赋值回调，而非调用onload
        fileReader.onload = (ev) => {
            // 收窄空值判断，避免result的类型报错
            if (typeof ev.target?.result === 'string') {
                console.log(ev.target.result);
                // JSON解析逻辑可在此处实现
                // const parsedData = JSON.parse(ev.target.result);
                // setData(parsedData);
            }
        }
    }
    return (
        <div className={s.upload}>
            <input
                className={s.uploadInput}
                type="file"
                accept=".json"
                onChange={handleUpload}
            />
        </div>
    )
}

方案2：使用addEventListener绑定事件 #

通过标准事件监听API绑定load事件，天然规避onload属性可能为null的类型问题：

const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const fileReader = new FileReader(); 
    fileReader.readAsText(file, 'UTF-8');
    fileReader.addEventListener('load', (ev) => {
        if (typeof ev.target?.result === 'string') {
            console.log(ev.target.result);
        }
    })
}

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