next.js 在Next JS 13应用程序目录中搜索服务器组件的参数

agxfikkp  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(191)

当使用文件结构app -〉explore -〉page.tsx并使用以下代码获取搜索参数时:

export default function ExplorePage({ searchParams }: { searchParams: { search: string | undefined } }) {
  const { search } = searchParams

我不能运行npm run build。它给出以下错误:

Type error: Page "app/explore/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ searchParams: { search: any; }; }", got "PageProps".
          Invalid configuration:
            Expected "{ search: any; }", got "Record<string, string | string[]> | undefined".
              Expected "{ search: any; }", got "undefined".

不过,我可以用npm run dev运行站点,它工作正常,没有错误。
以下是package.json文件中的版本号:

"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",

现在,我做错了什么得到这个错误?Next JS 13是全新的,应用程序目录仍在测试中,所以它可能是一个bug。
我试过:

  • 测试不同的类型以查看错误是否与此设置有关。
  • 首先尝试使用下一个路由器,当然没有工作,因为这是一个服务器组件。
piah890a

piah890a1#

试试这个

type Props = {
  params?: {
    num?: string;
  };
  searchParams?: {
    search?: string;
  };
};

export default function Page(props: Props) {...}
  • searchParams更改为searchParams?
  • search: string | undefined更改为search?: string〈- bug?

对我来说效果很好

相关问题