diff --git a/.changeset/fifty-moons-flash.md b/.changeset/fifty-moons-flash.md
new file mode 100644
index 0000000000000..fd3696bf6ee75
--- /dev/null
+++ b/.changeset/fifty-moons-flash.md
@@ -0,0 +1,25 @@
+---
+"@refinedev/core": patch
+---
+
+fix: The `label` and `route` fields in `useMenu().menuItems` were marked as deprecated, but they are not actually deprecated. This issue was caused by `menuItems` extending from `IResourceItem`, however, `menuItems` populates these fields and handles deprecation of these fields internally. This change removes the deprecation warning for these fields.
+
+```tsx
+export const Sider = () => {
+ const { menuItems } = useMenu();
+ menuItems.map((item) => {
+ // these are safe to use
+ console.log(item.label);
+ console.log(item.route);
+ item.children.map((child) => {
+ // these are safe to use
+ console.log(child.label);
+ console.log(child.route);
+ });
+ });
+
+ return
{/* ... */}
;
+};
+```
+
+[Fixes #6352](https://github.com/refinedev/refine/issues/6352)
diff --git a/packages/core/src/hooks/menu/useMenu.tsx b/packages/core/src/hooks/menu/useMenu.tsx
index 4e0c79c8959a3..36bf16d9b1af2 100644
--- a/packages/core/src/hooks/menu/useMenu.tsx
+++ b/packages/core/src/hooks/menu/useMenu.tsx
@@ -23,12 +23,14 @@ export type UseMenuProps = {
hideOnMissingParameter?: boolean;
};
-export type TreeMenuItem = FlatTreeItem & {
- route?: string;
- icon?: React.ReactNode;
- label?: string;
- children: TreeMenuItem[];
-};
+export type TreeMenuItem =
+ // Omitted because `label` and `route` are deprecated in `resource` but not in `menuItems`. These are populated in `prepareItem` for ease of use.
+ Omit & {
+ route?: string;
+ icon?: React.ReactNode;
+ label?: string;
+ children: TreeMenuItem[];
+ };
const getCleanPath = (pathname: string) => {
return pathname
@@ -86,7 +88,9 @@ export const useMenu = (
const prepareItem = React.useCallback(
(item: FlatTreeItem): TreeMenuItem | undefined => {
- if (item?.meta?.hide ?? item?.options?.hide) return undefined;
+ if (pickNotDeprecated(item?.meta?.hide, item?.options?.hide)) {
+ return undefined;
+ }
if (!item?.list && item.children.length === 0) return undefined;
const composed = item.list