React+TypeScript中已做真值判断仍报对象可能未定义错误

问题原因 #

你遇到的问题核心在于：possiblyUndefined是组件顶层声明的变量，TypeScript无法保证它在useEffect异步执行时一定不是undefined——哪怕你当前给它赋了值，TS也会考虑到后续代码可能修改这个变量的情况，因此不会自动认为它在useEffect内部是安全的。

可行解决方案 #

1. 在useEffect内部添加类型守卫判断

把变量存在性的判断放到useEffect函数内部，TypeScript会在这个代码分支里自动窄化变量类型，确认它不是undefined：

import { useState, useEffect } from 'react';

function YourComponent() {
  let [state, setState] = useState<{ foo: string }>({ foo: "" });
  let possiblyUndefined: { bar: string } | undefined = { bar: "hi" };

  useEffect(() => {
    // 在useEffect内部做判断，TS能识别这个分支里变量非空
    if (possiblyUndefined) {
      setState({ foo: possiblyUndefined.bar });
    }
  }, []);

  return <div>{state.foo}</div>;
}

2. 使用非空断言（谨慎使用）

如果你能100%保证possiblyUndefined永远不会是undefined（比如初始化后不会被修改），可以用非空断言运算符!告诉TypeScript这个变量一定有值：

useEffect(() => {
  setState({ foo: possiblyUndefined!.bar });
}, []);

注意：非空断言是开发者自己承担类型风险，如果后续变量意外变成undefined，会直接导致运行时错误，仅限确定变量状态时使用。

3. 用useState管理变量（推荐）

如果这个变量是组件状态的一部分，把它放到useState中管理，TypeScript能更好地追踪它的类型，同时依赖数组加入该变量后，能保证useEffect执行时拿到的是最新值：

import { useState, useEffect } from 'react';

function YourComponent() {
  let [state, setState] = useState<{ foo: string }>({ foo: "" });
  // 用useState管理变量，TS能准确追踪类型
  const [possiblyUndefined] = useState<{ bar: string } | undefined>({ bar: "hi" });

  useEffect(() => {
    if (possiblyUndefined) {
      setState({ foo: possiblyUndefined.bar });
    }
  }, [possiblyUndefined]);

  return <div>{state.foo}</div>;
}

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