React中解决Type 'HTMLCanvasElement' has no call signatures.ts(2349)错误

错误原因 #

你把ref的类型定义为HTMLCanvasElement | null，但实际通过getInstance存入ref的是react-canvas-confetti返回的实例调用函数（而非DOM元素），类型不匹配导致调用ref.current()时触发TS错误。

解决步骤 #

1. 安装类型依赖（如果未安装）：

   npm install @types/react-canvas-confetti --save-dev
   

2. 导入正确的类型：
   从类型包中导入实例类型和配置项类型，替代any：

   import type { ReactCanvasConfettiInstance } from 'react-canvas-confetti';
   import type { Options } from 'canvas-confetti';
   

3. 修正ref的类型定义：
   将ref的类型改为ReactCanvasConfettiInstance | null，匹配实际存储的实例函数：

   const refAnimationInstance = useRef<ReactCanvasConfettiInstance | null>(null);
   

4. 给回调函数指定明确类型：
   替换any类型，让TS能够正确校验：

   const getInstance = useCallback((instance: ReactCanvasConfettiInstance) => {
     refAnimationInstance.current = instance;
   }, []);
   
   const makeShot = useCallback((particleRatio: number, opts: Options) => {
     refAnimationInstance.current?.(
       {
         ...opts,
         particleCount: Math.floor(200 * particleRatio),
       }
     );
   }, []);
   

完整修正后的代码示例 #

import { useRef, useCallback } from 'react';
import type { ReactCanvasConfettiInstance } from 'react-canvas-confetti';
import type { Options } from 'canvas-confetti';
import ReactCanvasConfetti from 'react-canvas-confetti';

const YourComponent = () => {
  const refAnimationInstance = useRef<ReactCanvasConfettiInstance | null>(null);
  
  const getInstance = useCallback((instance: ReactCanvasConfettiInstance) => {
    refAnimationInstance.current = instance;
  }, []);

  const makeShot = useCallback((particleRatio: number, opts: Options) => {
    refAnimationInstance.current?.(
      {
        ...opts,
        particleCount: Math.floor(200 * particleRatio),
      }
    );
  }, []);

  return (
    <div>
      <button onClick={() => makeShot(0.5, { angle: 90 })}>触发特效</button>
      <ReactCanvasConfetti refConfetti={getInstance} />
    </div>
  );
};

export default YourComponent;

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