I am facing a type error in my Prismic Next.js application that I am struggling to resolve. While the app functions properly, I keep encountering type errors like the following:
The property 'data' does not exist on the type 'ContentRelationshipField<"category">'. The property 'data' does not exist on the type 'EmptyLinkField<"Document>".'
My app includes articles associated with different categories. I am trying to fetch the color of the first category linked to these articles.
Below is the implementation of 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;
The specific line causing the error is:
const categoryColor = article.data.categories[0]?.category.data.color;