Home and GetServerSideProps type error in Nextjs with Typescript

Viewed 78

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?

1 Answers

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);
Related