Component vs. Element

There is a difference between passing the component itself as the children prop:

<PrivateRoute>
  {MyComponent}
</PrivateRoute>

and passing an instance of the component:

<PrivateRoute>
  <MyComponent/>
</PrivateRoute>

The type children: JSX.Element applies to the second case and that is why you get the error:

JSX element type 'Component' does not have any construct or call signatures.

When you have already called the component through JSX like <MyComponent/> then you just get a JSX.Element which is not callable.

Typing the Component

You want to be passing a callable component. If this is react-router-dom I would recommend using the component prop instead of the children prop since they behave differently.

We want to say that our component can take the standard RouteComponentProps and also a user prop.

The PrivateRoute itself should take all of the RouteProps like to, exact, etc. But we will require a component prop with our modified type.

In order to call the component with our extra prop, we could use an inline render function render={props => <Component {...props} user={user} />}. We need to destructure it with an uppercase name in order to call it. We could also move the authentication logic into a higher-order component and use component={withUser(component)}.

Other Issues

We are going to be including this PrivateRoute alongside other Route components. So we want to render the Redirect only when we are actually on this Route. In other words, it should be a replacement of the component rather than a replacement of the Route. Otherwise traffic to other non-private routes will get inadvertently redirected.

You probably don't want to Redirect to the login page until after loading has finished. You can render a loading spinner or nothing while waiting for completion.

I'm not sure why there is so much checking and assertion on user. You should be able to do const user = data?.me; and get either a PartialUser or undefined.

Code

import React from "react";
import { Redirect, Route, RouteComponentProps, RouteProps, Switch } from "react-router-dom";

type PartialUser = {
    id: number;
    username: string;
    email: string;
};

declare function useMeQuery(): { error: any; loading: boolean; data?: { me: PartialUser } }

type ComponentProps = RouteComponentProps & {
    user: PartialUser;
}

type Props = RouteProps & {
    component: React.ComponentType<ComponentProps>;
    // disallow other methods of setting the render component
    render?: never;
    children?: never;
};

const PrivateRoute = ({ component: Component, ...rest }: Props) => {
  const { data, error, loading } = useMeQuery();

  const user = data?.me;

  return (
    <Route
      {...rest}
      render={(props) => {
        if (user) {
          return <Component {...props} user={user} />;
        } else if (loading) {
          return null; // don't redirect until complete
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

const MustHaveUser = ({user}: {user: PartialUser}) => {
    return <div>Username is {user.username}</div>
}

export const Test = () => (
    <Switch>
        <Route path="/home" render={() => <div>Home</div>} />
        <PrivateRoute path="/dashboard" component={MustHaveUser} />
    </Switch>
)

Typescript Playground Link