2

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 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.