Getting wrong types in Nuxt 3, but just in VSCode

Question

I'm building a blog page using Nuxt 3, @nuxtjs/sanity and I got this Typescript error.

interface Post {
  _id: string;
  _type: "post";
  _createdAt: string;
  title?: string;
  slug: Slug;
  author: string;
  authorPic: ImageAsset
  excerpt?: string;
  mainImage?: ImageAsset;
  body: PortableTextBlock[];
}


// fetching
const { data } = await useSanityQuery<Post>(query)

// reference
<BlogCard
  v-for="post in data"
  :blog="{
    title: post['title'],
    slug: post['slug'],
    dateCreated: post['dateCreated'],
    author: post['author'],
    image: post['imageUrl']
   }"
/>

Here's that VSCode Intellisense told me:

// type i got from VSCode intellisense
const post: string | Slug | ImageAsset | PortableTextBlock[] | undefined

Here's what it should be:

// type i expected
const post: {
  _id: string;
  _type: "post";
  _createdAt: string;
  title?: string;
  slug: Slug;
  author: string;
  authorPic: ImageAsset
  excerpt?: string;
  mainImage?: ImageAsset;
  body: PortableTextBlock[];
}

(Posts is, and suppose to be an array of Post type)

type error at the reference

'post' is possibly 'undefined'.ts(18048) Element implicitly has an 'any' type because expression of type '"title"' can't be used to index type 'string | Slug | ImageAsset | PortableTextBlock[]'. Property 'title' does not exist on type 'string | Slug | ImageAsset | PortableTextBlock[]'.ts(7053)

I hate to say this on StackOverflow, but it was working fine without an error yesterday.

This seems to be a problem only in the IDE though, as the dev server output works fine.

output

I'm using

• VSCodium 1.85.1 on Windows 11
• Volar 1.8.25
• Typescript 5.3.2

I've tried the followings:

• Removing node_modules and .nuxt directory and reinstalling using pnpm install

• Changing Volar's version to older version (I was using 1.8.25)