Can't display post title using PrismicText

Developing with Prismic
,
1

Hi, I can't display the article title using the PrismicText. It always throws this ts error saying

Type 'KeyTextField' is not assignable to type 'RichTextField | null | undefined'

Sample code

import { createClient } from '@/prismicio'
import { components } from '@/slices'
import { PrismicText } from '@prismicio/react'
import { notFound } from 'next/navigation'

export default async function Page({ params }) {
  const client = createClient()

  const article = await client
    .getByUID('blog_post', params.uid)
    .catch(() => notFound())

  return (
    <>
      <h1 className="text-4xl font-bold tracking-tight">
        <PrismicText field={article.data.title} /> // wont' work
      </h1>
    </>
  )
}

export async function generateStaticParams() {
  const client = createClient()

  const articles = await client.getAllByType('blog_post')

  return articles.map((article) => {
    return { uid: article.uid }
  })
}

I am sure that my title field is only a text type not a structured text. I use Nextjs 14.

2

Hello @magallen.fc and Happy Thanksgiving! :turkey:

I am a NextJS user, but I think I may still be of service.

In Prismic, if I've setup a document's title, I usually use a RichText field and limit it to accept only H1 and disable the multiple paragraphs. If I ever need just the plain text without the H1 tags, I use their helpers (I will show below.

It appears you're using the PrismicText component which I believe is for use with the Key Text field type. I see the documentation says that it will take rich text and convert it to plain text. I either use PrismicRichText or just use the key text as is. Allow me to attempt to illustrate:


import { PrismicRichText } from '@prismicio/react'
import * as prismic from '@prismicio/client'
const article = await client
    .getByUID('blog_post', params.uid)
    .catch(() => notFound())

  return (
    <>
        <PrismicRichText field={article.data.title} /> // This will output an H1
        <p>Below is a rich text field output as plain text</p>
        <p>{prismic.asText(article.data.title)}</p>
        <button>{ article.data.button_label }</button> // This is a key text field
    </>

This has been my experience. I hope this helps.

2 Likes