Next.js App Routes结合Prismic获取数据问题求助

1. 无法获取自定义字段（title、content等）的解决方法 #

Prismic文档的自定义字段都存储在data属性下，uid是文档的顶层属性。你需要通过page.data.xxx访问自定义字段，而非直接page.xxx。

修改初始代码如下：

import { createClient } from "@/prismicio";
import { PrismicRichText } from "@prismicio/react"; // 富文本字段需导入该组件

export default async function Page({ params }) {
  const client = createClient();
  const page = await client.getByUID("post", params.uid);

  return (
    <main>
      <h1>{page.data.title}</h1> {/* 直接渲染文本类型字段 */}
      {PrismicRichText.asReact(page.data.content)} {/* 转换并渲染富文本字段 */}
      <p>UID: {page.uid}</p>
    </main>
  );
}

2. 查询错误 unexpected field 'my.page.uid' 的修复 #

你参考的文档示例针对的是page类型自定义类型，但你的自定义类型是post。手动编写查询时需匹配正确的类型前缀：

• 错误写法：my.page.uid
• 正确写法：my.post.uid

更推荐使用getByUID方法（如你初始代码），它会自动处理类型匹配，无需手动编写查询语句，避免这类错误。

3. 渲染所有post时的React子元素错误修复 #

报错Objects are not valid as a React child是因为直接渲染了Prismic富文本字段的原始对象（包含type、text、spans）。必须使用PrismicRichText组件将富文本数据转换为可渲染的JSX。

示例代码（获取并渲染所有post）：

import { createClient } from "@/prismicio";
import { PrismicRichText } from "@prismicio/react";

export default async function AllPostsPage() {
  const client = createClient();
  const posts = await client.getAllByType("post");

  return (
    <main>
      <h1>所有文章</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.data.title}</h2>
            {PrismicRichText.asReact(post.data.content)}
            <p>UID: {post.uid}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

额外注意事项 #

• 确保Prismic自定义类型post的字段ID与代码中使用的一致（比如字段ID是title就用page.data.title，若为post_title则用page.data.post_title）。
• 文本类型字段可直接渲染，富文本字段必须通过PrismicRichText.asReact()处理。

内容的提问来源于stack exchange，提问作者SnooDucks299792