为Recharts自定义X轴刻度组件添加TypeScript类型

报错信息 #

Type '{}' is missing the following properties from '{x: number; y: number; payload: {value: number}}': x, y, payload

问题原因 #

你给XAxis的tick属性直接传了<CustomXAxisTick />，这相当于手动实例化组件但没传x/y/payload这三个必填props。但实际上Recharts会自动给自定义tick组件注入这些属性，你不需要手动传递。

解决方案 #

1. 修正tick属性的传值方式

把组件实例改成直接传组件本身：

<XAxis dataKey='x' tick={CustomXAxisTick} />

2. 优化类型定义（可选但推荐）

不用自己手写props类型，直接复用Recharts内置的类型，更规范：

import { XAxisProps } from 'recharts';

// 提取tick组件的props类型
type CustomXAxisTickProps = NonNullable<XAxisProps['tick']> extends React.ComponentType<infer P> ? P : never;

const CustomXAxisTick = ({ x, y, payload }: CustomXAxisTickProps) => {
  // 组件逻辑...
};

3. 修复语法错误

你原代码里的类型定义少了一个闭合的}，需要补上：

// 错误写法
const CustomXAxisTick = ({x, y, payload}: {x: number, y: number, payload: {value: number}) => { ... }

// 正确写法
const CustomXAxisTick = ({x, y, payload}: {x: number, y: number, payload: {value: number}}) => { ... }

完整修正代码 #

import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  ResponsiveContainer,
  Text,
  XAxisProps
} from 'recharts';

// 复用Recharts内置的tick组件props类型
type CustomXAxisTickProps = NonNullable<XAxisProps['tick']> extends React.ComponentType<infer P> ? P : never;

const CustomXAxisTick = ({ x, y, payload }: CustomXAxisTickProps) => {
  if (payload?.value) {
    return (
      <Text
        x={x}
        y={y}
        textAnchor="middle"
        dy={16} // 示例：调整文本与刻度线的距离
      >
        {payload.value}
      </Text>
    );
  }
  return null;
};

export const Chart = ({ data }: { data: Array<{ x: number; [key: string]: number }> }) => {
  return (
    <ResponsiveContainer width='100%' height={300}>
      <BarChart data={data}>
        <XAxis dataKey='x' tick={CustomXAxisTick} />
        <Bar dataKey="value" /> {/* 补充必要的Bar组件，根据你的数据结构调整dataKey */}
      </BarChart>
    </ResponsiveContainer>
  );
};

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