Next.js React-Typescript项目构建报错：Object may be undefined

问题原因 #

你当前的代码错误判断了videoRef本身是否为undefined，但useRef返回的RefObject永远不会是undefined。真正可能为undefined的是videoRef.current——因为初始化时没传入默认值，它的类型是HTMLVideoElement | undefined，所以TypeScript构建时会提示类型错误。

修复方案 #

方案1：用可选链检查current属性 #

修改useEffect里的判断逻辑，直接检查videoRef.current是否存在：

const videoRef = useRef<HTMLVideoElement>();
useEffect(() => {
  videoRef.current?.play();
}, []);

可选链操作符?.会在videoRef.current存在时才调用play()，彻底规避类型报错。

方案2：初始化时传入null并明确类型 #

如果想要更贴合React官方规范的写法，可以初始化时传入null，同时调整类型声明：

const videoRef = useRef<HTMLVideoElement | null>(null);
useEffect(() => {
  videoRef.current?.play();
}, []);

这种写法让TypeScript能更准确识别current的类型，避免模糊性。

方案3：非空断言（谨慎使用） #

如果你能100%确定videoRef.current在useEffect执行时已经挂载（比如视频元素是组件内必渲染的节点），可以用非空断言跳过类型检查：

const videoRef = useRef<HTMLVideoElement>();
useEffect(() => {
  videoRef.current!.play();
}, []);

注意：非空断言会忽略TypeScript的类型校验，如果实际场景中current可能为undefined，会引发运行时错误，仅在确定元素已挂载时使用。

内容的提问来源于stack exchange，提问作者Simon G. Kupisz