next.js 在具有ContentRelationshipField的prismic应用程序中键入错误

egmofgnx  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(69)

在我的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;

ctehm74n

ctehm74n1#

我通过创建一个类似于prismic类型的自定义类型找到了一种方法;但有我需要的东西

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

字符串
我不确定这是不是最好的方法,但至少目前是有效的

相关问题