TS2322 error on <PrismicRichText> field parameter

Hi guys,

I just started using Prismic with React/Typescript. It might not be related to Prismic at all, but I get a TS2322 error on my <PrismicRichText> field attribute when passing the document field I want to display.

For instance:

I managed to workaround using a // @ts-ignore comment:

But it does not look really good obviously :roll_eyes:

Is there a way I can get around this issue?


Hey Thibault,

I'm not sure what the issue is here, so I'm going to reach out to the team to get more info.


Thanks @Phil !


  • Node version :arrow_right: v16.11.1
  • package.json :arrow_right:
  "name": "hello-prismic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@prismicio/client": "^6.1.1",
    "@prismicio/react": "^2.0.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-helmet": "^6.1.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.5"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  "eslintConfig": {
    "extends": [
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
  • ts-config.json :arrow_right:
  "compilerOptions": {
    "target": "es2017",
    "lib": [
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  "include": [

Hey @thibault.pensec,

So this is related to the fact you haven't typed your API response, therefore you're dealing with a field which could be any kind field ( AnyRegularField )Two solutions:

  • Typing your API response using @prismicio/types through the generics on client method calls ( client.getSingle<PrismicDocument<{ description: RichTextField }>>("home") )
  • Using a type assertion ( <PrismicRichText field="{home.data.description as RichTextField}" /> )

Weโ€™d recommend typing the full document (the first solution). Today, that needs to be written by hand which isnโ€™t documented. We only have an example here: https://github.com/prismicio/prismic-client/tree/master/examples/with-typescript

The second solution is the quicker of the two if you want an immediate, low-effort fix. Choosing this route negates the benefits of TypeScript, so we would discourage it, but itโ€™s still a valid choice.


1 Like

Thanks @Phil it perfectly works!

1 Like