How can I enforce a non-null key for React elements in TypeScript?

EDIT:

As confirmed by OP, this does not work as we are bypassing React.createElement here which does not sit well with React Router when accepting Route components. Also it needs to be mentioned that React Router V6 does not allow HOCs around Route components. (It does allow them but then it does not allow us to use the component inside Router).

---

A few things here:

The error is not because of your type WithKey but because of what <Route /> returns. It will always return JSX.Element type. And in an Element type key can be missing or null. (TypeScript will not know about the value you are using right.)

Proof:

JSX.Element just extends React.ReactElement:

and ReactElement itself is created with key: string | null:

So you are better off creating a new component and ensuring that this component never accepts the wrong props.

Also, you would require some hacks to ensure it returns the correct type. See the JSX syntax itself : <A></A> will always return a JSX.Element. It is just syntactic sugar over React.createElement and unless you want to override it, there is no way you can override the return type of <Route></Route>.

You have to call your component like a normal function (this has its own implications).

So the hack to make it work would be this:

TYPESCRIPTCopied
const NewRoute = ({key , ...props} : RouteProps & {
  key : NonNullable<React.ReactElement['key']>
}) : React.ReactElement & { key : NonNullable<React.ReactElement['key']>} => {

  return <Route {...props} key={key} /> as React.ReactElement & { key : NonNullable<React.ReactElement['key']>};
}

type WithKey = React.ReactElement & { key: React.ReactElement['key'] }

const Ret = NewRoute({ path : '/dashboarrd' , key : '1'});
const Ret2 = NewRoute({ path : '/dashboarrd' });


export const App = () => {
  const routes: WithKey[] = [];

  if (user.role === 'admin') {
    // should not error
    routes.push(Ret)
    
  }

  if (user.role === 'employee') {
    // should error
    routes.push(Ret2);
  }
}

But then it would be easier if you just create a new component like above which is always expecting a key. Do not worry about what the type it returns when you are pushing to const routes: WithKey[] = [].