React+TypeScript中解决canvasRef.current可能为undefined的报错

这个报错是TypeScript严格空值检查的结果——useRef初始化时current默认是undefined，TS会提示你不能直接调用它的方法。以下是几种可行的解决方式：

1. 添加空值检查（推荐，最安全） #

先判断canvasRef.current是否存在，再执行后续逻辑，避免运行时出错：

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) return; // 若canvas不存在，直接退出
  const ctx = canvas.getContext('2d');
  // 在这里操作ctx即可
}, [])

2. 使用非空断言运算符（!） #

如果你能确保canvasRef一定绑定到了真实的<canvas>元素（比如组件渲染时该元素肯定存在），可以用非空断言告诉TScurrent不会是undefined：

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  const canvas = canvasRef.current!; // 断言current非空
  const ctx = canvas.getContext('2d');
}, [])

注意：如果实际场景中current可能为null/undefined，用这个方法会导致运行时错误，谨慎使用。

3. 可选链结合空值判断 #

通过可选链?.避免直接访问undefined的属性，再检查上下文是否获取成功：

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  const ctx = canvasRef.current?.getContext('2d');
  if (!ctx) return; // 若ctx获取失败，直接退出
  // 在这里操作ctx
}, [])

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