Typescript: MenuItem missing "component" prop

[NathanC]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The MenuItem is missing the "component" prop in Typescript, in @mui/material v5.9.2. It has the LinkComponent prop, but that seems to do something different.

It looks like this was an issue in MUI 4, but that was closed as fixed: #14970

Expected behavior 🤔

component should be able to be provided, so I can use a react-router-dom Link and give MenuItem a to prop. It says it exists in the documentation

Steps to reproduce 🕹

No response

Context 🔦

Trying to make it so MenuItem is a react-router-dom link (specifically a RouterLink). If there's another way to accomplish this, let me know!

Your environment 🌎

npx @mui/envinfo

System:
    OS: Linux 5.18 Arch Linux
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    Yarn: Not Found
    npm: 8.15.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 103.0
  npmPackages:
    @emotion/react:  11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.91 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.92 => 5.0.0-alpha.92 
    @mui/material: ^5.9.2 => 5.9.2 
    @mui/private-theming:  5.9.1 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.9.2 
    @mui/types:  7.1.5 
    @mui/utils:  5.9.1 
    @types/react: ^17.0.47 => 17.0.47 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.3 => 5.3.5 
    typescript: ^4.7.4 => 4.7.4 

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[NathanC]

This is also an issue for ListItemButton, apparently. It likewise has no component prop, only a LinkComponent prop, This isn't discussed in the docs

[NathanC]

I just did some testing with this, and it works if I forcefully ignore the typing by spreading the props

{...{component: NavLink, to: item.to}}

So it seems like this is just a issue with the Typescript declarations.

[Dsalazar1685]

I can do a quick fix for this - the prop spread works but it's always nicer to have the types in place.

[mnajdova]

I don't understand what is the issue, it works as expected - https://codesandbox.io/s/young-cache-pu312y?file=/src/App.tsx

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.