admin管理员组

文章数量:1122846

I am fetching the single post with POST_QUERY from SANITY package. However typescript shows error which said that children property doesn't exist. In typescript types its shows that children property exist and accessible but typescript throw an error.

My query:

export const POST_QUERY = defineQuery(`*[_type == "post" && slug.current == $slug][0]`);

const result = await client.fetch(POST_QUERY, { slug: "how-i-became-a-blogger" }) as POST_QUERYResult;

Types: these are the whole types of my POST_QUERYResult and as you see that body contains children property

export type POST_QUERYResult = {
  _id: string;
  _type: "post";
  _createdAt: string;
  _updatedAt: string;
  _rev: string;
  title?: string;
  slug?: Slug;
  author?: {
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    [internalGroqTypeReferenceTo]?: "author";
  };
  mainImage?: {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
  };
  categories?: Array<{
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    _key: string;
    [internalGroqTypeReferenceTo]?: "category";
  }>;
  publishedAt?: string;
  body?: Array<{
    children?: Array<{
      marks?: Array<string>;
      text?: string;
      _type: "span";
      _key: string;
    }>;
    style?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "normal";
    listItem?: "bullet";
    markDefs?: Array<{
      href?: string;
      _type: "link";
      _key: string;
    }>;
    level?: number;
    _type: "block";
    _key: string;
  } | {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
    _key: string;
  }>;
} | null;

I am fetching the single post with POST_QUERY from SANITY package. However typescript shows error which said that children property doesn't exist. In typescript types its shows that children property exist and accessible but typescript throw an error.

My query:

export const POST_QUERY = defineQuery(`*[_type == "post" && slug.current == $slug][0]`);

const result = await client.fetch(POST_QUERY, { slug: "how-i-became-a-blogger" }) as POST_QUERYResult;

Types: these are the whole types of my POST_QUERYResult and as you see that body contains children property

export type POST_QUERYResult = {
  _id: string;
  _type: "post";
  _createdAt: string;
  _updatedAt: string;
  _rev: string;
  title?: string;
  slug?: Slug;
  author?: {
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    [internalGroqTypeReferenceTo]?: "author";
  };
  mainImage?: {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
  };
  categories?: Array<{
    _ref: string;
    _type: "reference";
    _weak?: boolean;
    _key: string;
    [internalGroqTypeReferenceTo]?: "category";
  }>;
  publishedAt?: string;
  body?: Array<{
    children?: Array<{
      marks?: Array<string>;
      text?: string;
      _type: "span";
      _key: string;
    }>;
    style?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "normal";
    listItem?: "bullet";
    markDefs?: Array<{
      href?: string;
      _type: "link";
      _key: string;
    }>;
    level?: number;
    _type: "block";
    _key: string;
  } | {
    asset?: {
      _ref: string;
      _type: "reference";
      _weak?: boolean;
      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
    };
    hotspot?: SanityImageHotspot;
    crop?: SanityImageCrop;
    alt?: string;
    _type: "image";
    _key: string;
  }>;
} | null;

  • typescript
  • next.js
  • sanity
Share Improve this question edited Nov 21, 2024 at 17:58 marc_s 754k183 gold badges1.4k silver badges1.5k bronze badges asked Nov 21, 2024 at 17:16 Kannu MandoraKannu Mandora 6833 silver badges16 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I found the solution. I am doing it wrong way that's why i had encounted the error.

I need to use <PortableText value={result.body} /> import from next-sanity package which is used to show the block content.

本文标签： nextjsChildren property is accessible however typescript shows the errorStack Overflow

版权声明：本文标题：next.js - Children property is accessible however typescript shows the error - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736308592a1933712.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。