React+TypeScript文件上传报TS2345错误，已做非空检查仍提示null不可赋值

报错原因 #

1. TS无法跟踪React状态的类型收缩结果：React的state是可变、支持异步更新的，TS无法保证你在if条件中对this.state.selectedFile做的非空判断，到后续调用formData.append时仍然有效——两次访问this.state之间，状态有可能被其他操作修改，因此TS不会保留非空的类型收缩结果，仍然认为this.state.selectedFile可能为null。
2. 部分情况下如果没有显式给state定义selectedFile: File | null的类型，TS的自动推导也可能出现判断偏差。

修复方案 #

方案1（最推荐）：将状态值提取为局部变量 #

局部变量的变更可被TS完全跟踪，提前赋值后非空判断会直接生效，不会出现类型报错：

if (this.state !== null && this.state.selectedFile !== null) {
    // 提取为局部变量，TS可正确识别非空
    const selectedFile = this.state.selectedFile;
    const formData = new FormData();
    formData.append(
        "foo",
        selectedFile,
        selectedFile.name
    );
}

方案2：使用非空断言（仅当你100%确定运行时此处值不为空时使用） #

通过!运算符显式告诉TS该值不可能为null，跳过类型检查：

if (this.state !== null && this.state.selectedFile !== null) {
    const formData = new FormData();
    formData.append(
        "foo",
        this.state.selectedFile!,
        this.state.selectedFile!.name
    );
}

方案3：使用可选链+空值兜底 #

如果允许空值场景下传默认值，也可以写为：

const formData = new FormData();
formData.append(
    "foo",
    this.state?.selectedFile ?? new Blob(),
    this.state?.selectedFile?.name ?? "unknown"
);

内容的提问来源于stack exchange，提问作者Stupid.Fat.Cat