React与react-chartjs-2类型错误：undefined无法赋值给Chart类型参数

你的问题出在useRef未指定正确类型，且调用getDatasetAtEvent时未处理chartRef.current可能为undefined的情况。以下是具体修复步骤：

步骤1：为useRef指定正确类型 #

利用你已导入的ChartJSOrUndefined类型，初始化ref时明确其类型：

// 替换原useRef声明
const chartRef = useRef<ChartJSOrUndefined>(null);

步骤2：调用函数前检查ref有效性 #

在onClick回调中，先判断chartRef.current是否存在，再调用getDatasetAtEvent，避免TypeScript报错：

const onClick = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
  if (chartRef.current) {
    console.log(getDatasetAtEvent(chartRef.current, e));
  }
};

完整修复后的代码 #

import React, { useRef } from "react";
import {
  Chart as ChartJS,
  BarElement,
  Tooltip,
  LinearScale,
  CategoryScale,
  ChartEvent 
} from "chart.js";
import { Bar, getDatasetAtEvent } from "react-chartjs-2";
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";

ChartJS.register(BarElement, Tooltip, LinearScale, CategoryScale);
const labels = [
  "January",
  "February",
  "January",
  "February",
  "January",
  "February",
  "January",
  "February",
];

export const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      display: false,
    },
  },
};

export const data = {
  labels,
  datasets: [
    {
      label: "Dataset 1",
      data: [345, 229, 10, 110, 20, 30, 40, 50],
      backgroundColor: "#3F3E57",
      barThickness: 60,
      borderRadius: 8,
      hoverBackgroundColor:"#0661FF"
    },
  ],
};

const Chart = () => {
  const chartRef = useRef<ChartJSOrUndefined>(null);
  
  const onClick = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
    if (chartRef.current) {
      console.log(getDatasetAtEvent(chartRef.current, e));
    }
  };

  return (
    <div className="chart">
      <div className="chart__title">
        <h4>Montly Revenue</h4>
        <h2>$1500</h2>
      </div>
      <div className="chart__main">
        <Bar options={options} data={data} ref={chartRef} onClick={onClick}/>
      </div>
    </div>
  );
};

export default Chart;

报错原因说明 #

• 未指定类型的useRef()默认类型为MutableRefObject<undefined>，导致chartRef.current被识别为undefined，而getDatasetAtEvent要求第一个参数必须是有效的Chart实例。
• 通过指定ref类型并添加空值检查，TypeScript可确认chartRef.current在调用时是有效的，从而消除类型错误。

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