RichTextField TypeScript error, says text doesn't exist on on an image node but this is a paragraph node

Developing with Prismic
,
1

I'm trying to use Prismic in a TypeScript/NextJS project. I've typed a rich text field with the RichTextField type, but when trying to access the text via tutorial.data.description[0].text it says text doesn't exist on an image node. This is because the RichTextField type can be any of the nodes, but there isn't any way of configuring it to say this rich text field is a paragraph so the text property does exist...

image
image1734×320 54.4 KB

Here's the problem I'm talking about. Any help would be massively appreciated.

Thanks

1 Like
5

Hello @reactcraft, thanks for reaching out.

@angeloashmore, explains and recommends the following:

This happens because that data could be any Rich Text block (a paragraph, heading, image, etc.). TypeScript can’t know what content is in that field, so it says that it can be any kind of Rich Text block. If you want to access the Rich Text data directly by reading description[0].text, you can do an if check first.

if ('text' in description[0]) { 
  // The text field is now available 
}

Using @prismicio/helpers’s asText() function is better than accessing the text property directly.

import * as prismicH from '@prismicio/helpers' 

prismicH.asText(description)
1 Like