TS+React开发Canvas组件调用getContext报null/never类型错误

两个报错都是TypeScript严格类型检查+类型推断机制触发的，具体对应：

• 第一个Object is possibly 'null'报错：useRef初始化时传入的默认值是null，在组件挂载完成前，canvasRef.current的值确实为null，TypeScript无法静态确认useEffect执行时ref已经完成DOM绑定，因此判定直接在canvas上调用方法存在空值访问风险。
• 第二个Property 'getContext' does not exist on type 'never'报错：调用useRef(null)时没有传入泛型指定ref绑定的元素类型，TypeScript会将该ref的类型推断为RefObject<null>，也就是判定current属性永远只能是null，类型被收窄为never，自然不存在getContext属性。

分两步调整即可：

1. 给useRef添加泛型参数，明确ref后续绑定的是Canvas DOM元素，对应类型为HTMLCanvasElement，让TS可以正确推导ref的类型。
2. 在访问canvas实例、获取2d上下文时添加空值判断，符合TS的严格空值检查要求，同时兼容边界场景（比如浏览器不支持2d上下文、ref绑定失败）。

修复后的完整代码如下：

import { useRef, useEffect } from 'react';

// 继承原生canvas元素的属性类型，可按需自定义扩展
type CanvasProps = React.ComponentProps<'canvas'>;

const Canvas = (props: CanvasProps) => {
  // 给useRef指定泛型类型，初始化值为null
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    // 空值判断：canvas未挂载时直接返回
    if (!canvas) return;
    const context = canvas.getContext("2d");
    // 空值判断：2d上下文获取失败时直接返回
    if (!context) return;
    
    // 绘图逻辑
    context.fillStyle = "#000000";
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }, []);

  return <canvas ref={canvasRef} {...props} />;
};

export default Canvas;

如果确认项目运行环境一定支持Canvas 2d上下文，也可以用非空断言!简写省略判断，但生产环境更推荐上面的空值判断写法，避免运行时报错。

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