Question 418485 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – NextJS/React Type does not satisfy constraint

I have code in a NextJS app showing some problems, though it has been working up to now.

I suspect it is because some npm package version has changed, but I’d like to get an external eye looking at the issue.

Here is the package.json file for the working app:

{
  "name": "myappone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-google-maps/api": "^2.19.3",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "react-firebase-hooks": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

Here is the package.json file for the app having troubles:

{
  "name": "myapptwo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-google-maps/api": "^2.20.3",
    "firebase": "^11.0.0",
    "next": "15.0.0",
    "react": "19.0.0-rc-65a56d0e-20241020",
    "react-dom": "19.0.0-rc-65a56d0e-20241020",
    "react-firebase-hooks": "^5.1.1",
    "react-router-dom": "^6.27.0",
    "react-tabs": "^6.0.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Here is the error message I get when compiling
(i.e. when running: firebase deploy)

info  - Need to disable some ESLint rules?
      Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

Failed to compile.

app/GPSFix/[rcdId]/page.tsx
Type error: Type 'pageProps' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ rcdId: string; }' is missing the following properties
          from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

Error: An unexpected error has occurred.

Finally the code having trouble follows:

'use client';

import { useState, useEffect } from 'react';
import {useAuthState} from 'react-firebase-hooks/auth';
import {getAuth} from "firebase/auth";
import {onValue,update,ref} from "firebase/database";
import {firebaseApp,firebaseDatabase} from '../../../firebase/config';
import Login from '../../components/login';

const auth = getAuth(firebaseApp);

.....

interface pageProps {
    params: {
        rcdId: string
    }
}

.....

export default function GPSFix({params: {rcdId}}: pageProps) {
    const [lgdInFlag, setLgdInFlag] = useState(false);
    const [user, loading] = useAuthState(auth as any);

  useEffect(() => {
    if (loading) return;
    if (!user) setLgdInFlag(false);
    else setLgdInFlag(true);
  }, [user, loading]);

  .....
    useEffect(() => {
    .....
    }, [leapType])

useEffect(() => {
  onValue(dbRef, (snapshot) => {
    .....
  },
  (error) => {
    console.log('Error(onValue): '+error);
  }
  );
}, [])

useEffect(() => {
  if (!writeGPS) return
  const gpsStr = currentGPS.coords.latitude.toString() + ',' +
                 currentGPS.coords.longitude.toString()
  update(dbRef, {gPS: gpsStr})
  setWriteGPS(false)
}, [currentGPS])

useEffect(() => {
  if (!writeCoord) return
  fixShopGPS()
  setWriteCoord(false)
}, [shopLatit,shopLongit])

  const setShopGPS = (): void => {
    .....
  } /* End of setShopGPS */

  const fixShopGPS = (): void => {
    const gpsStr = shopLatit + ',' + shopLongit
    update(dbRef, {gPS: gpsStr})
  } /* End of fixShopGPS */

  const removeShopGPS = (): void => {
    const gpsStr = '0.0,0.0'
    update(dbRef, {gPS: gpsStr})
  } /* End of removeShopGPS */

  const synchroAdjXpln = (): string => {
    .....
  } /* End of synchroAdjXpln */


  if (!lgdInFlag) return (<Login actn={()=>setLgdInFlag(true)} />)
  
  return (
    <div className="flex flex-col bg-amber-500 items-center
                    w-full mx-4 px-6 py-4">
      <div className="font-sans font-normal text-xl pb-2">
        ここで{shopName}のGPS座標を調整できる。
      </div>
      .....
      <div className='flex justify-start items-center w-80 my-1'>
        <input type={"checkbox"}
               checked={synchroAdjust}
               onChange={() => setSynchroAdjust(!synchroAdjust)}
               className="bg-cyan-200" />
        <label className='ml-4'>{synchroAdjXpln()}</label>
      </div>
      {!synchroAdjust &&
        <button
          className="bg-sky-950 text-slate-50 my-1 px-2"
          onClick={fixShopGPS} >
          SOME-USEFUL-INFORMATION
        </button>
      }
    </div>
  )
} /* End of GPSFix */

How could I solve the problem and get rid of this error showing up ?

Tags:

2

Answers


  1. 0

    Next.js 15 onwards, Params and SearchParams are now Promise.
    See link Asynchronous Page

    You can now define Params like this (Server Side):

    type Params = Promise<{ rcdId: string }>

export default async function GPSFix(props: { params: Params }) {
  const params = await props.params;
  const rcdId = params.rcdId;
}

    Client Side:

    "use client";

import { use } from 'react';

type Params = Promise<{ rcdId: string }>

export default function GPSFix(props: { params: Params }) {
  const params = use(props.params);
  const rcdId = params.rcdId;
}
    Login or Signup to reply.
  2. 0

    because of the latest update from nextjs. I will add two snippets, the first one is causing the issue and the second one solves the issue

    import SingleCourseLessonContainer from "@/components/single-course-lesson/SingleCourseLessonContainer";

export default function SingleCoursePage({
    params,
}: {
    params: { id: string };
}) {
    const { id } = params;
    return <SingleCourseLessonContainer courseId={id} />;

    The original code was causing the same problem, but after adding a type to the params type with a generic Promise, it solved the issue. this is the correct version.

    import SingleCourseLessonContainer from "@/components/single-course-lesson/SingleCourseLessonContainer";

type paramsType = Promise<{ id: string }>;
export default async function SingleCoursePage({
    params,
}: {
    params: paramsType;
}) {
    const { id } = await params;
    return <SingleCourseLessonContainer courseId={id} />;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search