Next.js getStaticPaths返回无效paths值的问题求助

核心错误原因 #

你遇到的错误是因为getStaticPaths返回的paths不符合Next.js的要求：

• 当Apollo查询返回的data.products为undefined时，data.products?.edges.map(...)会得到undefined，而Next.js要求paths必须是数组类型（哪怕是空数组）。
• 另外，如果商品id不是字符串类型，也会触发该错误，因为params中的值必须是字符串。

修复步骤 #

1. 确保paths始终为数组，且id为字符串 #

修改getStaticPaths中的paths定义，添加默认空数组，并将id转为字符串，同时增加错误捕获：

export async function getStaticPaths() {
  const client = initializeApollo();

  try {
    const { data } = await client.query({
      query: GET_ALL_PRODUCTS_QUERY,
      variables: allProductsQueryVars,
    });

    // 确保paths是数组，且id为字符串类型
    const paths = data?.products?.edges?.map(({ node: { id } }) => ({
      params: { id: String(id) },
    })) || [];

    return {
      paths,
      fallback: false,
    };
  } catch (error) {
    // 查询失败时返回空数组，避免构建中断
    console.error('获取商品路径失败:', error);
    return {
      paths: [],
      fallback: false,
    };
  }
}

2. 验证Apollo查询的返回结构 #

检查GET_ALL_PRODUCTS_QUERY的返回数据是否符合预期：

• 在getStaticPaths中添加日志打印data结构，确认data.products.edges存在：

  console.log('商品查询返回数据:', data);
  

• 如果返回的products为空或结构不符，需要调整GraphQL查询参数或查询语句。

3. 可选优化：在getStaticProps中预获取商品数据 #

当前组件使用客户端useQuery获取数据，会失去SSG预渲染的优势。建议在getStaticProps中预获取商品数据：

export const getStaticProps = async ({ params }) => {
  const client = initializeApollo();

  try {
    const { data } = await client.query({
      query: GET_SINGLE_PRODUCT_QUERY,
      variables: { id: params.id },
    });

    if (!data?.product) {
      return { notFound: true }; // 商品不存在时返回404
    }

    // 注入Apollo缓存状态，避免客户端重复查询
    return addApolloState(client, {
      props: {
        product: data.product,
      },
    });
  } catch (error) {
    console.error('获取单个商品失败:', error);
    return { notFound: true };
  }
};

然后修改组件直接使用props中的商品数据：

export default function ProductPage({ product }) {
  return <SingleProduct product={product} />;
}

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