TS-React类型报错：number|null无法赋值给number的替代解决方案咨询

方案1：使用非空断言操作符（!） #

直接在userId后加!，明确告知TypeScript此时userId不可能为null，适合你确定调用API时用户已登录、userId必然存在的场景：

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    console.log(workoutName);
    try {
        const response = await createWorkout({ workoutName, userId: userId! });
        console.log(response);
    } catch (err) {
        console.log(err);
    }
};

方案2：运行时检查+类型收窄 #

如果想避免潜在的null值风险，先做运行时判断，TypeScript会自动收窄类型，代码更严谨：

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    console.log(workoutName);
    if (!userId) {
        console.error("用户未登录，无法创建训练计划");
        return;
    }
    try {
        const response = await createWorkout({ workoutName, userId });
        console.log(response);
    } catch (err) {
        console.log(err);
    }
};

方案3：自定义类型守卫函数 #

如果需要在多个地方复用类型检查逻辑，可以写一个类型守卫函数：

function isNumber(value: number | null): value is number {
    return typeof value === "number";
}

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    console.log(workoutName);
    if (!isNumber(userId)) {
        console.error("用户未登录，无法创建训练计划");
        return;
    }
    try {
        const response = await createWorkout({ workoutName, userId });
        console.log(response);
    } catch (err) {
        console.log(err);
    }
};

方案4：类型断言（as number） #

和非空断言效果一致，用as number强制转换类型，语义上更强调类型转换：

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    console.log(workoutName);
    try {
        const response = await createWorkout({ workoutName, userId: userId as number });
        console.log(response);
    } catch (err) {
        console.log(err);
    }
};

内容的提问来源于stack exchange，提问作者emre.krn