MaterialReactTable中TypeScript类型不匹配错误的排查与解决

核心问题原因 #

1. 类型泛型匹配错误：你给MRT_ColumnDef指定的泛型是ResponseData（整个响应的容器结构），但Material React Table需要的是单条表格行的数据类型，而非整个响应的外层结构。错误提示里的Property 'data' is missing in type 'MRT_RowData' but required in type 'ResponseData'就是因为这个不匹配导致的。
2. 数据源传递错误：useMaterialReactTable接收的data参数应该是表格行数据的数组，但你直接传入了整个response对象，正确的数据源应该是response.data（即响应里存放行数据的数组）。
3. 嵌套数组的accessorKey误用：你的数据结构里shift、machines、operators、partNames都是数组，直接用链式accessorKey（比如shift.shift）无法正确访问数组内的元素，需要自定义单元格渲染或借助表格的展开功能处理层级数据。

具体解决步骤 #

1. 修正类型定义 #

拆分出单条行数据的类型，让表格列的泛型匹配行数据：

// 单条表格行的数据类型
interface RowData {
  date: string;
  shift: {
    shift: string;
    morning: {
      machines: {
        machineName: string;
        operators: {
          operatorId: string;
          partNames: {
            partName: string;
            partCount: number;
          }[];
        }[];
      };
    }[];
  }[];
}

// 整个响应的结构
interface ResponseData {
  data: RowData[];
}

2. 修正列定义与数据源传递 #

调整列的泛型为RowData，传入正确的数据源response.data，同时处理嵌套数组的单元格渲染：

import { useMemo } from "react";
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from "material-react-table";
import { response } from "./dummyResponse";

interface RowData {
  date: string;
  shift: {
    shift: string;
    morning: {
      machines: {
        machineName: string;
        operators: {
          operatorId: string;
          partNames: {
            partName: string;
            partCount: number;
          }[];
        }[];
      };
    }[];
  }[];
}

interface ResponseData {
  data: RowData[];
}

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<RowData>[]>(
    () => [
      {
        accessorKey: "date",
        header: "Date",
      },
      {
        accessorKey: "shift",
        header: "Shift",
        // 渲染shift数组中的所有shift值
        cell: ({ row }) => row.original.shift.map(item => item.shift).join(", "),
      },
      {
        accessorKey: "shift.morning.machines",
        header: "Machine Name",
        cell: ({ row }) => 
          row.original.shift.flatMap(s => 
            s.morning.machines.map(m => m.machineName)
          ).join(", "),
      },
      // 其他列同理，处理嵌套数组的扁平化或自定义渲染
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    // 传入正确的行数据数组
    data: response.data,
    enableExpandAll: false,
    enableExpanding: true,
    filterFromLeafRows: true,
    initialState: { expanded: true },
    paginateExpandedRows: false,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;

3. 深层嵌套数据的优化（可选） #

如果需要展示完整的层级明细（比如每个机器、操作员、零件单独成行），可以先扁平化数据源：

// 扁平化数据源，将多层嵌套转为平铺的行数据
const flattenedData = useMemo(() => {
  return response.data.flatMap(row => 
    row.shift.flatMap(shiftItem => 
      shiftItem.morning.machines.flatMap(machine => 
        machine.operators.flatMap(operator => 
          operator.partNames.map(part => ({
            date: row.date,
            shift: shiftItem.shift,
            machineName: machine.machineName,
            operatorId: operator.operatorId,
            partName: part.partName,
            partCount: part.partCount,
          }))
        )
      )
    )
  );
}, [response.data]);

// 使用扁平化后的数据源生成表格
const table = useMaterialReactTable({
  columns: useMemo<MRT_ColumnDef<typeof flattenedData[0]>[]>(() => [
    { accessorKey: "date", header: "Date" },
    { accessorKey: "shift", header: "Shift" },
    { accessorKey: "machineName", header: "Machine Name" },
    { accessorKey: "operatorId", header: "Operator ID" },
    { accessorKey: "partName", header: "Part Name" },
    { accessorKey: "partCount", header: "Part Count" },
  ], []),
  data: flattenedData,
  // ...其他配置
});

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