React TypeScript组件传参报错：Property不存在于IntrinsicAttributes

这个错误的核心原因是：你的BarChart组件没有显式定义接收的Props类型，TypeScript默认只允许React内置的属性（比如key、ref这类IntrinsicAttributes），所以你传递的自定义property属性不在允许范围内，触发了类型不匹配报错。

下面是具体的修复步骤：

1. 给BarChart组件定义Props类型 #

在BarChart.tsx中，先导入Chart.js对应的类型，再明确组件接收的Props结构：

import React from 'react';
import { Bar } from 'react-chartjs-2';
// 导入Chart.js的Bar数据集类型
import { BarDataset } from 'chart.js';

// 定义组件接收的Props接口
interface BarChartProps {
  // 对应你要传递的datasets属性，名称可以根据语义调整
  datasets: BarDataset[];
  // 如果需要传递标签，也可以加上对应字段
  labels: string[];
}

// 用React.FC泛型绑定Props类型
const BarChart: React.FC<BarChartProps> = ({ datasets, labels }) => {
  const chartData = {
    labels,
    datasets,
  };

  return <Bar data={chartData} />;
};

export default BarChart;

2. 在App.tsx中传递符合类型的Props #

确保你传递的数据结构和BarChartProps定义的一致：

import React from 'react';
import BarChart from './BarChart';
import { BarDataset } from 'chart.js';

function App() {
  // 定义符合BarDataset类型的数据集
  const chartDatasets: BarDataset[] = [
    {
      label: '用户数量',
      data: [23, 45, 18, 32, 50, 29],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
    },
  ];

  const chartLabels = ['1月', '2月', '3月', '4月', '5月', '6月'];

  return (
    <div className="App">
      {/* 传递定义好的props字段 */}
      <BarChart datasets={chartDatasets} labels={chartLabels} />
    </div>
  );
}

export default App;

关键注意点 #

• 不要用模糊的any类型，尽量使用Chart.js提供的内置类型（比如BarDataset）来保证类型安全；
• 组件的Props名称要和接口定义完全一致，如果你之前非要用property作为字段名，只需要把BarChartProps里的datasets改成property即可；
• 如果是类组件，同样需要通过Props泛型来定义接收的属性类型。

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