Sanity Schema含prepare的自定义预览导致生产构建失败

问题根源 #

开发环境类型检查宽松（比如tsconfig.json中strict: false），而Vercel构建默认启用严格类型检查，你的手动类型定义和Sanity实际返回的字段类型不匹配：

• logo如果是Sanity的Image类型，并非string，而是包含asset对象的结构
• 未考虑字段的可选性（比如visibility下的字段可能未初始化，类型为undefined）
• prepare函数的参数类型未对齐Sanity的PreviewProps内置类型

修复方案 #

1. 导入Sanity内置类型

先引入必要的类型定义：

import type { PreviewProps } from '@sanity/types';

2. 调整Preview代码

修改select和prepare部分，匹配实际字段类型并处理可选性：

preview: {
  select: {
    title: 'name',
    index: 'visibility.index',
    inSlides: 'visibility.inSlides',
    inRestaurants: 'visibility.inRestaurants',
    img: 'logo.asset', // 若logo是Sanity Image类型，需取asset对象
  },
  // 使用Sanity内置的PreviewProps类型推导selection
  prepare(selection: PreviewProps['selection']) {
    // 解构时添加类型断言，覆盖可选字段
    const {
      title = 'Untitled',
      index = 'N/A',
      inSlides = false,
      inRestaurants = false,
      img
    } = selection as {
      title?: string;
      index?: number;
      inSlides?: boolean;
      inRestaurants?: boolean;
      img?: { url: string };
    };

    return {
      title,
      media: img?.url, // 安全访问asset的url，处理null/undefined情况
      subtitle: `POS:${index}, Slide:${inSlides ? '🟢' : '🔴'}, List:${inRestaurants ? '🟢' : '🔴'}`
    };
  }
}

3. 统一类型检查规则

确保本地开发和Vercel构建的tsconfig.json启用相同的严格模式，避免开发环境隐藏类型问题：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

关键说明 #

• Sanity的Image类型字段返回的是包含asset的对象，而非直接的字符串URL，需通过logo.asset.url获取地址
• 所有可能未初始化的字段需添加默认值或可选链处理，避免严格模式下的类型错误
• 使用Sanity内置的PreviewProps类型可以自动对齐框架的类型要求，减少手动定义的误差

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