NextJS 无法获取单个条目数据问题求助

可能的问题及修复方案 #

1. API URL 拼接优化 #

你的PRODUCT_API_BASE_URL末尾带有斜杠，虽不会直接导致错误，但用模板字符串拼接更严谨，避免潜在路径问题：

// 方式1：保留原BASE_URL，用模板字符串拼接
const res = await fetch(`${PRODUCT_API_BASE_URL}${id}`);

// 方式2：去掉BASE_URL末尾斜杠，用/分隔路径（更推荐）
const PRODUCT_API_BASE_URL = "http://localhost:8080/api/v1/products";
const res = await fetch(`${PRODUCT_API_BASE_URL}/${id}`);

2. 后端返回数据结构不匹配 #

如果后端返回的是嵌套格式（比如{ data: [产品列表] }），getStaticPaths里直接用data.map会报错，因为data是对象而非数组。需要调整数据提取逻辑：

export const getStaticPaths = async () => {
    const res = await fetch(PRODUCT_API_BASE_URL);
    const response = await res.json();
    // 假设后端返回结构为 { data: [...] }，提取实际产品列表
    const products = response.data; 
    const paths = products.map(product => ({
        params: { id: product.id.toString() }
    }))
    return { paths, fallback: false }
}

3. 增加API请求错误处理 #

当请求单个产品失败时（比如ID不存在、后端报错），未处理的错误会导致product无法正常传递给组件。需增加异常捕获：

export const getStaticProps = async (context) => {
    const id = context.params.id;
    try {
        const res = await fetch(`${PRODUCT_API_BASE_URL}${id}`);
        // 检查请求是否成功
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        const data = await res.json();
        return { props: { product: data } }
    } catch (error) {
        console.error(error);
        // 返回空值或默认数据，避免组件崩溃
        return { props: { product: null } }
    }
}

4. 组件渲染时处理空值情况 #

如果product未正确获取，直接访问product.nameProduct会触发报错。可选两种修复方式：

• 使用可选链操作符：

const ProductDetail = ({ product }) => {
    return (
        <>
            {product?.nameProduct || "产品不存在"}
        </>
    )
}

• 条件渲染：

const ProductDetail = ({ product }) => {
    if (!product) return <div>产品不存在</div>;
    return <>{product.nameProduct}</>
}

5. 调整fallback配置适配动态数据 #

如果你的产品数据会动态新增，fallback: false会导致新产品页面无法访问。可设置fallback: true或fallback: 'blocking'，并处理加载状态：

// 修改getStaticPaths的fallback配置
return { paths, fallback: true }

// 组件中添加加载状态处理
import { useRouter } from 'next/router';

const ProductDetail = ({ product }) => {
    const router = useRouter();
    if (router.isFallback) return <div>加载中...</div>;
    if (!product) return <div>产品不存在</div>;
    return <>{product.nameProduct}</>
}

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