TypeScript类型不匹配错误导致Vercel部署失败求助

问题场景 #

部署网站到Vercel时遇到TypeScript类型错误：在getServerSideProps中，fetchPageInfo()返回的PageInfo[]类型无法赋值给期望的PageInfo类型，提示数组缺失单个对象的属性。

错误代码片段：

export const getServerSideProps : GetServerSideProps<Props> =  async () => {
  const pageInfo: PageInfo = await fetchPageInfo(); // 报错："Type 'PageInfo[]' is missing the following properties from type 'PageInfo': _type, address, backgroundInformation, email, and 9 more"
  // ...其他代码
}

错误根源 #

整个数据流中存在类型声明与实际返回值不匹配的问题：

1. Sanity的GROQ查询*[_type == "pageInfo"][0]实际返回单个PageInfo对象，但API接口错误地将其声明为数组类型
2. fetchPageInfo函数延续了这个错误，将返回值声明为数组，最终导致getServerSideProps中类型不兼容

修复步骤 #

1. 修正API接口（pages/api/getPageInfo.ts） #

将接口返回的类型从数组改为单个对象：

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]
`
// 修改Data类型，pageInfo为单个PageInfo对象
type Data = {
    pageInfo: PageInfo
}

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
){
    // 类型改为PageInfo，而非数组
    const pageInfo: PageInfo = await sanityClient.fetch(query);
    res.status(200).json({ pageInfo })
}

2. 修正fetchPageInfo函数 #

将返回值类型改为单个PageInfo对象：

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

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

    const data = await res.json()
    // 类型改为PageInfo，而非数组
    const pageInfo: PageInfo = data.pageInfo;
    return pageInfo
}

3. 确认getServerSideProps类型匹配 #

修正上述两处后，getServerSideProps中的pageInfo: PageInfo声明将自动匹配返回值类型，无需额外修改。

验证 #

修改完成后，TypeScript错误将消失，部署到Vercel时也不会再出现类型不兼容问题。

内容的提问来源于stack exchange，提问作者Ensar