NextJS/React 类型不满足约束

Question

我的 NextJS 应用程序中的代码显示出一些问题，尽管它到目前为止一直在运行。

我怀疑这是因为某些 npm 包版本发生了变化，但我想从外部来看待这个问题。

这是工作应用程序的 package.json 文件：

{
  "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"
  }
}

这是遇到问题的应用程序的 package.json 文件：

{
  "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"
  }
}

这是我编译时收到的错误消息 （即运行时：firebase 部署）

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.

最后出现问题的代码如下：

'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 */

如何解决问题并消除出现的错误？

Answer 1

Next.js 15 开始，Params 和 SearchParams 现在是 Promise。 请参阅链接 异步页面

您现在可以像这样定义参数：

type Params = Promise<{ rcdId: string }>

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