初始化useState为空时如何移除undefined类型？

以下是几种可行的解决方式，根据你的场景选择：

1. 非空断言操作符（!） #

在确定name绝不会为undefined的场景下，直接使用非空断言告诉TypeScript该值已被初始化：

// 当下游组件仅在isFetched为true时渲染
{isFetched && <ChildComponent name={name!} />}

注意：仅当你能100%保证此时name一定存在时使用，否则会隐藏潜在的运行时错误。

2. 利用条件渲染做类型收窄 #

结合isFetched的条件判断，TypeScript会自动收窄name的类型，无需额外断言：

// 明确的条件分支让TS推断name此时为Example类型
if (isFetched) {
  return <ChildComponent name={name} />;
}
return <Loading />;

这种方式最安全，因为TS会基于你的逻辑自动推导类型，没有跳过检查的风险。

3. 调整useState的初始值与类型 #

将状态初始值设为null并明确类型，再配合条件判断：

// 把状态类型改为Example | null，初始值设为null
const [name, setName] = useState<Example | null>(null);

// 渲染时的条件判断
{isFetched && name && <ChildComponent name={name} />}

这种方式比undefined更语义化，也更容易配合类型守卫处理。

4. 自定义类型断言函数 #

如果你的数据校验逻辑更复杂，可以写一个断言函数来确保数据符合类型：

function isExample(data: unknown): data is Example {
  return typeof data === 'object' && data !== null && 'name' in data && typeof (data as Example).name === 'string';
}

// 在获取数据后先校验再设置状态
const fetchedData = await fetch().json();
if (isExample(fetchedData)) {
  setName(fetchedData);
  setIsFetched(true);
}

这样不仅能确保状态的类型正确性，还能提前拦截不符合格式的接口返回数据，避免后续逻辑出错。

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