NextJS/React Type does not satisfy constraint

Question

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 ?

Answer 1

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

Answer 2

With the transition from Next.js 14 to 15, there have been significant changes, one of which is the way params are handled. The following code can serve as a helpful reference for understanding this update.

// Before
type Params = { slug: string }
 
export function generateMetadata({ params }: { params: Params }) {
  const { slug } = params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = params
}
 
// After
type Params = Promise<{ slug: string }>
 
export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params
}
 
export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Params
}) {
  const { slug } = await params
}

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams