打字稿类型错误:类型 '{ params: PageParams; }' 不满足约束 'PageProps'

问题描述 投票:0回答:1

此页面通过 api 从 wordpress 获取 gutenberg 块并将其传递给 BlockRenderer 组件 /app/[...slug]/page.tsx:

import { BlockRenderer } from "../components/BlockRenderer";
import { notFound } from "next/navigation";
import { getPage } from "../../api/getPage";
import { Block } from "../../api/types"; // Adjust this import based on where your Block type is defined


interface PageProps {
  params: {
    slug: string[]; // Assuming slug is an array of strings
  };
  
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;

  const data: Block[] | null = await getPage(slug.join("/")); // Assuming getPage returns Block[] or null

  
  if (!data) {
    notFound();
  }

  return (
    <div>
           <BlockRenderer blocks={data || []} />;
    </div>

  )
  
 
}

“../../api/类型”:

export interface Block {
  id?: string;
  name?: string;
  attributes: BlockAttributes; // Attributes are optional
  innerBlocks?: InnerBlock[]; // Optional, as some blocks may not have inner blocks
  
}
export interface InnerBlock extends Block {
  innerBlocks?: InnerBlock[];  // Recursive definition for nested blocks
}
export interface BlockRendererProps {
  blocks: Block[]; // Array of Block objects
}
export interface BlockAttributes {
  id?: number,
  level?: 1 | 2 | 3 | 4 | 5 | 6; // Optional, used in heading blocks
  content: string; // Optional, used in paragraph and heading blocks
  isStackedOnMobile?: boolean; // Optional, used in columns block
  width: string;
  textAlign?: string;
  textColor: ThemeKeys;
  style?: StyleAttributes;
  [key: string]: any;
}

错误:

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

整个事情在开发模式下运行得很好。

我尝试更改参数类型,但没有帮助。

typescript next.js
1个回答
0
投票

尝试使用

interface PageProps {
  params: {
    slug: Promise<string[]>;
  };
}

Nextjs 文档关于此问题

© www.soinside.com 2019 - 2024. All rights reserved.