从Sanity Studio Schema传递视频URL引发Studio报错

问题根源 #

你的Sanity Studio报错核心原因是预览配置（preview）里的media字段直接使用了URL类型的bgVideo。Sanity的preview.media仅支持图像资产（Image Asset）或React图标组件，直接传入URL字符串会触发渲染错误。另外，URL字段配置里的hotspot是图像字段专属的属性，属于无效配置，也可能引发警告。

修复步骤 #

1. 修正Sanity Schema配置

修改预览模块的media为图标组件，并移除URL字段的无效配置：

import { defineField, defineType } from 'sanity'
import { TfiLayoutCtaCenter } from 'react-icons/tfi'
import { getBlockText } from '../../src/utils'

export default defineType({
    name: 'hero.video',
    title: 'Hero (Video)',
    icon: TfiLayoutCtaCenter,
    type: 'object',
    fields: [
        // 保留原有其他字段
        defineField({
            name: 'bgVideo',
            type: 'url',
            title: 'Background Video URL',
            description: 'URL of the background video',
            // 移除URL字段不需要的hotspot配置
        }),
    ],
    preview: {
        select: {
            content: 'content',
        },
        prepare: ({ content }) => ({
            title: getBlockText(content),
            subtitle: 'Hero (Video)',
            media: TfiLayoutCtaCenter, // 用图标替代URL作为预览媒体
        }),
    },
})

2. 简化Next.js组件的URL处理

Sanity的URL字段本身会做格式校验，无需额外转义，可简化视频URL的处理逻辑：

// 替换原有的sanitizedUrl和hasVideo逻辑
const hasVideo = !!bgVideo

效果验证 #

修改后，Sanity Studio的报错会消失，同时Next.js端的视频播放功能不受影响。预览面板会显示你指定的图标，保持界面一致性。

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