Home and GetServerSideProps type error in Nextjs with Typescript - reactjs

Question

I'm struggling with getting my first Nextjs project with Typescript and next-firebase-auth package. I want to call the API in getserversideprops, and return the value to the main component, in this case, the index page.
Here is how it looks right now
import {
AuthAction,
useAuthUser,
withAuthUser,
withAuthUserTokenSSR,
} from "next-firebase-auth";
import FullPageLoader from "../components/layout/FullPageLoader";
import SignUp from './signup/index';
import {useEffect} from 'react';
import {useRouter} from 'next/router';
import { NextPage } from "next";
type PageProps = {
profile: boolean | {
username: string,
name: string,
surname: string
}
}
const Home: NextPage<PageProps> = (props) => {
const AuthUser = useAuthUser()
const router = useRouter()
useEffect(() => {
if (props.profile) {
router.push(`/advisor/${AuthUser.id}/profile`)
}
}, [AuthUser.id, props.profile, router])
return (
<>
<SignUp />
</>
);
};
export const getServerSideProps = withAuthUserTokenSSR({
whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
})(async ({AuthUser}:any) => {
const token = await AuthUser.getIdToken()
const response = await fetch(`htpp://localhost:3001/profile/${AuthUser.id}/get-profile`, {
method: 'GET',
headers: {
Authorization: token || ''
}
})
if (response.status !== 200) {
const _props: PageProps = {profile: false}
return { props: _props }
}
const profile = await response.json()
const _props: PageProps = {profile}
return {
props: _props
}
})
export default withAuthUser({
whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
LoaderComponent: FullPageLoader,
})(Home);
And the compiler throws this error
./src/pages/index.tsx:74:4
Type error: Argument of type 'FunctionComponent<PageProps> & { getInitialProps?(context: NextPageContext): PageProps | Promise<PageProps>; }' is not assignable to parameter of type 'ComponentType<unknown>'.
Type 'FunctionComponent<PageProps> & { getInitialProps?(context: NextPageContext): PageProps | Promise<PageProps>; }' is not assignable to type 'FunctionComponent<unknown>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'unknown' is not assignable to type 'PageProps'.
72 | whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
73 | LoaderComponent: FullPageLoader,
> 74 | })(Home);
| ^
75 |
I don't understand why he wants a ComponentType<unknow> because type is declared. Tried also to declare directly ({profile}:any)but throws a similar error. How I can get this to work with Typescript?

Answer 1

Finally solved with the required utility type ?
type PageProps = {
profile?: boolean | {
username: string,
name: string,
surname: string
}
}
and also the return type of the exported Home function
export default withAuthUser<PageProps>({
whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
LoaderComponent: FullPageLoader,
})(Home);