TypeScript中useState初始值为null时如何赋值对象

报错原因 #

TypeScript 会根据useState的初始值自动推导对应状态的类型。传入初始值null时，TS 会将alert状态的类型推导为null，后续调用setAlert传入包含msg、type属性的对象时，自然和推导的null类型冲突，触发ts(2345)类型错误。

解决方法 #

方法1：显式声明useState泛型类型（推荐） #

提前定义提示状态的结构，调用useState时通过泛型明确告知TS该状态的所有可能类型，同时给showAlert的入参补充类型，避免隐式any带来的类型丢失问题。

// 定义支持的提示类型，字面量联合类型可以限制非法值传入
type AlertType = "success" | "error" | "warning" | "info";
// 定义提示展示时的对象结构
interface AlertState {
  msg: string;
  type: AlertType;
}

// 显式声明状态为「提示配置对象」或「null（隐藏提示）」的联合类型
const [alert, setAlert] = useState<AlertState | null>(null);

const showAlert = (message: string, type: AlertType) => {
  setAlert({
    msg: message,
    type: type,
  });

  setTimeout(() => {
    setAlert(null);
  }, 2000);
};

注意：不要用any或者{}作为泛型类型，会完全丢失TS的类型校验能力，后续写错属性名、传错type值都不会有提示。

方法2：拆分状态管理（适合简单场景） #

如果不想处理联合类型，也可以把提示的显隐状态、内容、类型拆成独立的state管理，逻辑更直白：

const [showAlertFlag, setShowAlertFlag] = useState(false);
const [alertMessage, setAlertMessage] = useState("");
const [alertType, setAlertType] = useState<"success" | "error">("success");

const showAlert = (message: string, type: "success" | "error") => {
  setAlertMessage(message);
  setAlertType(type);
  setShowAlertFlag(true);
  setTimeout(() => {
    setShowAlertFlag(false);
  }, 2000);
};

这个方案不需要处理null类型的判断，适合提示配置项少、逻辑简单的场景，缺点是状态数量更多。

额外优化提示 #

使用setTimeout自动关闭提示时，建议在组件卸载时清除定时器，避免组件卸载后调用setState触发React内存泄漏警告。

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