next.js 类型中缺少以下属性,Typescript错误

ifmq2ha2  于 2022-11-23  发布在  TypeScript
关注(0)|答案(1)|浏览(126)

我有这个错误阻止我部署我的网站到 Vercel,任何帮助将是如此感激。通常我收到的 pageInfo 数据从 Sanity,并能够在我的网站使用。唯一的问题是这个奇怪的TS错误,我不知道如何修复。

...
export default Home;

export const getServerSideProps : GetServerSideProps<Props> =  async () => {
  const pageInfo: PageInfo = await fetchPageInfo(); //pageInfo gives the error "Type 'PageInfo[]' is missing the following properties from type 'PageInfo': _type, address, backgroundInformation, email, and 9 more"
  const experiences: Experience[] = await fetchExperiences();
  const skills: Skill[] = await fetchSkills();
  const projects: Project[] = await fetchProjects();
  const socials: Social[] = await fetchSocials();

  return{
    props:{
      pageInfo,
      experiences,
      skills,
      projects,
      socials
    },
  }
}

下面是PageInfo接口

export interface PageInfo extends SanityBody{
    _type: "pageInfo"
    address: string
    backgroundInformation: string
    email: string
    role: string
    heroImage: Image
    name: string
    phoneNumber: string
    profilePic: Image
}

sanity文件(如果有人需要

export default {
  name: 'pageInfo',
  title: 'PageInfo',
  type: 'document',
  fields: [
    {
      name:"address",
      title:"Address",
      type: "string"
    },
    {
      name:"backgroundInformation",
      title:"BackgroundInformation",
      type: "string"
    },
    {
      name:"email",
      title:"Email",
      type: "string"
    },
    {
      name:"role",
      title:"Role",
      type: "string"
    },
    {
      name:"heroImage",
      title:"Image",
      type:"image",
      options:{
        hotspot: true,
      }
    },
    {
      name:"name",
      title:"Name",
      type: "string",
    },
    {
      name:"phoneNumber",
      title:"PhoneNumber",
      type: "string"
    },

    {
      name:"profilePic",
      title:"ProfilePic",
      type: "image",
      options: {
        hotspot: true
      }
    },
    {
      name:"socials",
      title:"Socials",
      type: "array",
      of: [{ type: "reference", to: {type: "social"}}]
    },

   ],
}

正在提取页面信息

import type { NextApiRequest, NextApiResponse } from "next";
import { groq } from "next-sanity";
import { sanityClient } from "../../sanity"
import { PageInfo} from "../../typings"

const query = groq`
    *[_type == "pageInfo"][0]
`
type Data = {
    pageInfo: PageInfo[ ]
}

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
){
    const pageInfo: PageInfo[] = await sanityClient.fetch(query);
    res.status(200).json({ pageInfo })

}

...

import { PageInfo } from "../typings";

export const fetchPageInfo = async() => {
    const res = await fetch(`http://localhost:3000/api/getPageInfo`)

    const data = await res.json()
    const pageInfo: PageInfo[] = data.pageInfo;
    //console.log("fetching => > >", skills)
    return pageInfo
}
mkshixfv

mkshixfv1#

类型不匹配。在fetchPageInfo中,返回值的类型是PageInfo[](确切地说,是Promise<PageInfo[]>)。在这里,您将返回值视为单数PageInfo

const pageInfo: PageInfo = await fetchPageInfo()

因此,TypeScript提出了反对意见。

相关问题