此页面通过 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]
整个事情在开发模式下运行得很好。
我尝试更改参数类型,但没有帮助。