React Admin企业版：Breadcrumb组件未显示指定recordRepresentation字段

场景与配置细节 #

1. 自定义Breadcrumb组件 #

import { Breadcrumb } from '@react-admin/ra-navigation';

const MyBreadcrumb = () => (
    <Breadcrumb sx={{ marginTop: 2, marginLeft: 2 }}>
        <Breadcrumb.ResourceItems />
    </Breadcrumb>
);

export default MyBreadcrumb;

2. 布局中引入Breadcrumb #

const SciLayout = (props: LayoutProps) => {
  return (
    <ProfileContextProvider>
      <Layout
        {...props}
        breadcrumb={<MyBreadCrumb />}
        menu={SciMenu}
        dashboard={SciDashboardPage}
        appBar={SciAppBar}
      />
    </ProfileContextProvider>
  );
};

3. 全局应用布局并配置tasks资源 #

import SciLayout from './layout/SciLayout';

const App = () => {
    return (
        <ThemeProvider>
            <Admin
                layout={SciLayout}
                dataProvider={NodeDataProviderEvents}
                authProvider={SciZitadelAuthProvider}
            >
                <Resource
                    name='tasks'
                    options={{ label: 'Meldungen' }}
                    list={TaskList}
                    show={TaskShow}
                    icon={TaskAltIcon}
                    recordRepresentation="name"
                />
            </Admin>
        </ThemeProvider>
    );
};

4. 数据库中tasks单条记录结构 #

{
  "_id": {
    "$oid": "648aa87bf9bc3f2d982140e1"
  },
  "id": "648aa87bf9bc3f2d982140e1",
  "name": "Zinsstatistik Juli 2023",
  "deadline": {
    "$date": "2023-06-30T00:00:00.000Z"
  },
  "user": "Max Mustermann",
  "controller": "Maxine Mustermann",
  "currentStage": {
    "$oid": "644a2bfc20c9acb2f7ed9a3a"
  },
  "state": "OPEN",
  "taskDefinition": {
    "$oid": "644a2ae920c9acb2f7ed9988"
  },
  "maskStates": {
    "644a2bf220c9acb2f7ed9a34": {
      "tabIndex": "3"
    },
    "644a2bfc20c9acb2f7ed9a3a": {
      "uploaded1": true,
      "fileName1": "addresses.csv",
      "uploaded2": true,
      "fileName2": "spndTest.zip"
    },
    "644a2bf820c9acb2f7ed9a37": {
      "uploaded": true,
      "fileName": "testGIF.gif"
    },
    "6488236012f7f47b4706fcad": {
      "uploaded1": true,
      "fileName1": "pdf-teaser.png"
    }
  }
}

问题现象 #

未配置recordRepresentation时，Breadcrumb显示任务ID；将其配置为"name"后，仍仅显示ID。后端数据库连接正常，数据可正常读取。

排查方向与解决方案 #

1. 组件名称拼写错误 #

在SciLayout中引入的组件是<MyBreadCrumb />，但自定义组件的实际名称是MyBreadcrumb（字母c为小写）。拼写错误会导致React渲染一个空的未知组件，实际使用的是默认Breadcrumb，因此recordRepresentation配置不生效。

修正方式：将SciLayout中的<MyBreadCrumb />改为<MyBreadcrumb />。

2. 验证dataProvider返回的字段 #

虽然数据库中存在name字段，但需要确认dataProvider在返回数据时是否正确包含了该字段。可以在TaskList或TaskShow组件中打印record数据，检查name字段是否存在且有值。

3. 改用函数式recordRepresentation #

如果上述两点都没问题，可以尝试将recordRepresentation改为函数形式，确保能正确获取字段：

<Resource
  name='tasks'
  options={{ label: 'Meldungen' }}
  list={TaskList}
  show={TaskShow}
  icon={TaskAltIcon}
  recordRepresentation={(record) => record.name || record.id}
/>

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