React+TypeScript项目中如何正确初始化空的state状态？

1. 先抽离定义统一的选项类型 #

先给下拉选项声明固定的TS类型，避免后续类型推断混乱：

// 单独定义下拉选项的类型，可全局复用
export type SelectOption = {
  id: number;
  name: string;
}

// 给静态选项数组指定类型
export const options: SelectOption[] = [
    {
        id : 0,
        name : "Setting 1"
    },
    {
        id : 1,
        name : "Setting 2"
    },
    {
        id : 2,
        name : "Setting 3"
    }
];

2. 给state显式声明联合类型，允许空值 #

通过useState的泛型参数显式声明字段可能为空，初始化时直接赋值null即可，不会触发类型报错：

const [myForm, setMyForm] = React.useState<{
  dropdown: SelectOption | null;
  dropdown1: SelectOption | null;
}>({
  // 初始状态直接设为null
  dropdown: null,
  dropdown1: null
});

3. 空值兼容处理 #

属性访问 #

后续访问选项的id、name属性时，使用TS可选链语法即可兼容空值场景：

// 空值时返回undefined，不会触发运行时报错
console.log(myForm.dropdown?.id, myForm.dropdown?.name)

表单校验 #

在提交表单等需要确保选项有值的场景，先做空值判断，TS会自动在判断后的逻辑里缩小类型范围，无需额外类型断言：

const handleSubmit = () => {
  // 空值拦截
  if (!myForm.dropdown || !myForm.dropdown1) {
    alert('请完成所有下拉选择');
    return;
  }
  // 此处TS会自动推断dropdown、dropdown1一定是SelectOption类型，直接访问属性无报错
  submitApi({
    selectId: myForm.dropdown.id,
    selectName: myForm.dropdown.name
  })
}

4. 下拉组件适配 #

给下拉框加一个默认禁用的占位选项，对应空值状态，避免默认选中第一个有效选项：

<select
  value={myForm.dropdown?.id ?? ''}
  onChange={(e) => {
    const selectedId = Number(e.target.value);
    const matchedOption = options.find(opt => opt.id === selectedId);
    setMyForm(prev => ({
      ...prev,
      dropdown: matchedOption || null
    }))
  }}
>
  {/* 空值对应的占位选项 */}
  <option value="" disabled>请选择</option>
  {options.map(opt => (
    <option key={opt.id} value={opt.id}>{opt.name}</option>
  ))}
</select>

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