实时白板共享项目Canvas组件getContext空指针错误求助

核心问题原因 #

你通过条件渲染控制Canvas的显示：仅当用户是演示者时才渲染<canvas ref={canvasRef} />。但在RoomPage中调用getContext时，未判断canvasRef.current是否存在——当用户不是演示者时，Canvas未挂载到DOM，canvasRef.current为null，直接调用getContext就会触发Cannot read properties of null (reading 'getContext')错误。

具体修复方案 #

1. 强制添加空值校验 #

在所有访问Canvas上下文的代码前，先检查ref的有效性：

// 替换原有的getContext调用逻辑
if (canvasRef.current) {
  const ctx = canvasRef.current.getContext('2d');
  // 执行绘制、事件绑定等后续逻辑
}

2. 用useEffect控制执行时机 #

将Canvas初始化逻辑放到useEffect中，依赖user?.presenter状态，确保只有当Canvas被渲染后才执行相关操作：

useEffect(() => {
  // 仅当用户是演示者且Canvas已挂载时执行
  if (user?.presenter && canvasRef.current) {
    const ctx = canvasRef.current.getContext('2d');
    // 初始化画布尺寸、绑定鼠标/触摸绘制事件等
  }
}, [user?.presenter]);

3. 隔离演示者专属逻辑 #

所有和Canvas绘制、实时同步相关的代码，都要包裹在user?.presenter的判断中，避免非演示者状态下触发无效操作：

// 示例：鼠标按下绘制事件
const handleMouseDown = (e) => {
  if (!user?.presenter || !canvasRef.current) return;
  // 执行绘制起始逻辑
};

优化建议 #

把演示者的Canvas逻辑封装成独立的PresenterCanvas组件，内部处理ref和上下文管理，RoomPage中只需根据状态渲染该组件或CanvasViewer，降低页面代码复杂度。

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