在我的prismic nextjs应用程序中,我有一个无法解决的类型错误。该应用程序在功能上运行良好,但我一直有一些类型错误,比如这个:
La propriété 'data' n'existe pas sur le type 'ContentRelationshipField<“category”>'. La propriété 'data' n'existe pas sur le type 'EmptyLinkField<“Document”>'.
我有一些文章涉及到一些类别。我想得到的颜色第一类相关的文章
以下是Article组件:
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;
字符串
以及我得到错误的特定行:
const categoryColor = article.data.categories[0]?.category.data.color;
1条答案
按热度按时间ctehm74n1#
我通过创建一个类似于prismic类型的自定义类型找到了一种方法;但有我需要的东西
字符串
我不确定这是不是最好的方法,但至少目前是有效的