Typing error in a prismic app with a ContentRelationshipField

Question

In my prismic nextjs app, I have a type error I can't solve. The app work fine functionally, but I keep having some type errors like this one :

La propriété 'data' n'existe pas sur le type 'ContentRelationshipField<"category">'. La propriété 'data' n'existe pas sur le type 'EmptyLinkField<"Document">'.

I have some articles related to some categories. I want to get the color of the first category related to the articles

Here is the Article component :

import React from "react";
import { PrismicLink, PrismicText } from "@prismicio/react";
import { PrismicNextImage } from "@prismicio/next";
import * as prismicH from "@prismicio/helpers";
import type { ArticleDocument, CategoryDocument } from "../../prismicio-types";
import { getExcerpt } from "../../lib/getExcerpt";
import { findFirstImage } from "../../lib/findFirstImage";
import { dateFormatter } from "../../lib/dateFormatter";
import { asapMedium } from "../../utils/font";

type ArticleProps = {
  article: ArticleDocument;
};

const Article: React.FC<ArticleProps> = ({ article }) => {
  const featuredImage =
    (prismicH.isFilled.image(article.data.featuredImage) &&
      article.data.featuredImage) ||
    findFirstImage(article.data.slices);
  const date = prismicH.asDate(
    article.data.publishDate || article.first_publication_date
  );
  const excerpt = getExcerpt(article.data.slices);
  const categoryColor = article.data.categories[0]?.category.data.color;
  const backgroundColor = categoryColor || "#ffffff ";

  return (
    <li className="relative grid grid-cols-1 items-start gap-6 md:gap-8">
      <PrismicLink document={article} tabIndex={-1}>
        <div
          className="overlay-color z-10 md:block"
          key={article.id}
          style={{ backgroundColor }}
        ></div>
        <div className="bg-gray-100 aspect-h-3 aspect-w-4 relative">
          {prismicH.isFilled.image(featuredImage) && (
            <PrismicNextImage
              field={featuredImage}
              fill={true}
              width="0"
              height="0"
              sizes="100%"
              alt=""
              className="object-cover"
            />
          )}
        </div>
      </PrismicLink>
      <div
        className={`${asapMedium.className} overlay-text absolut-center-x absolute bottom-10 z-10 grid w-full grid-cols-1 justify-center gap-3 px-3 text-center align-top text-2xl uppercase drop-shadow-sm md:col-span-2`}
      >
        <h2 className="text-white">
          <PrismicLink document={article}>
            <PrismicText field={article.data.title} />
          </PrismicLink>
        </h2>
      </div>
    </li>
  );
};

export default Article;

And the specific line where I get the error :

const categoryColor = article.data.categories[0]?.category.data.color;

score 0 · Answer 1 · answered Jul 26 '23 at 15:31

I find a way by creating a custom type similar to the prismic type; but with the properties I need.

const categoryColor = (
    article.data.categories[0]
      ?.category as CustomContentRelationshipFieldCategory
  )?.data?.color;

Not sure that it's the best way, but it works, for the moment at least

Typing error in a prismic app with a ContentRelationshipField

1 Answers1