披萨网站点击披萨详情出现Server Error问题求助

问题分析 #

你遇到的Server Error: Unable to resolve image URL from source (undefined)错误，核心原因有三点：

1. GROQ查询语法错误：直接拼接slug变量时未做字符串处理，导致查询无法匹配到正确的披萨文档，返回的pizza对象缺失image字段
2. Props接收方式错误：页面组件未正确解构Next.js传入的props对象，导致无法获取到pizza数据
3. 缺少容错处理：未判断image字段是否存在，直接调用urlFor导致传入undefined报错

解决方案 #

1. 修复GROQ查询逻辑 #

在getStaticProps中，使用GROQ参数绑定（推荐）或给slug添加引号，确保查询能正确匹配到文档：

export async function getStaticProps(context) {
    const {slug = ""} = context.params;
    // 使用参数绑定避免语法错误和注入风险
    const pizza = await client.fetch(
        `*[_type=="pizza" && slug.current == $slug][0]`,
        { slug } // 传递查询参数
    );
    return {
        props: {
            pizza,
        },
    };
}

2. 修正组件Props接收方式 #

页面组件需要从props对象中解构出pizza属性，而不是直接接收pizza作为参数：

// 错误写法
// export default function Pizza( pizza ) { 

// 正确写法
export default function Pizza({ pizza }) { 

3. 添加Image字段容错处理 #

在调用urlFor前，先判断pizza.image是否存在，避免传入undefined：

export default function Pizza({ pizza }) { 
    // 可选链操作符判断image是否存在
    const src = pizza?.image ? urlFor(pizza.image).url() : '';
    
    // 无图片时返回提示
    if (!src) {
        return <Layout><div className={css.noImage}>暂无披萨图片</div></Layout>;
    }

    return (
        <Layout>
            <div className={css.container}>
                <div className={css.imageWrapper}>
                    <Image 
                        loader={() => src}
                        alt={pizza.name || '披萨图片'} // 优化alt属性，不要留空
                        src={src} 
                        layout='fill' 
                        unoptimized 
                        objectFit='cover'
                    />
                </div>
            </div>
        </Layout>
    );
}

额外检查 #

• 确认Sanity后台中对应披萨文档的image字段已正确上传图片，且字段类型为Sanity的Image类型
• 验证getStaticPaths返回的slug列表与Sanity文档中的slug.current完全匹配

内容的提问来源于stack exchange，提问作者Truong Hao Nhien