Question

我正在使用Next.js建立一个电子商务平台。在使用动态路由的产品页面上，我使用了getStaticProps来获取我的产品，并使用了getStaticPaths来生成应该静态生成的产品的路径。这在开发模式下可以完美运行，但是无法构建项目。从getStaticProps传递到页面组件的产品属性在构建时未定义。

这是我在尝试构建时遇到的错误：

在呈现页面“ / product / [id]”时发生错误。阅读更多： https://err.sh/next.js/prerender-error TypeError：无法解构产品的属性“名称”（未定义）。

function ProductPage({ product}) {
// product is defined in development but undefined when trying to build
const {
name,
price,
} = product;
// The rest of the component
}

export const getStaticPaths = async () => {
  connectDb();

  const products = await Product.find();
  const paths = products.map(product => ({
    params: { id: product._id.toString() },
  }));
  return {
    paths,
    fallback: true,
  };
};

export const getStaticProps = async ({ params }) => {
  connectDb();
  const { id } = params;
  try {
    // getting the product
    const product = await Product.findOne({ _id: id });
    return {
      props: {
        product: JSON.parse(JSON.stringify(product)),
      },
    };
  } catch (err) {
    console.log(err);
    return {
      props: {
        product: {},
      },
    };
  }
};

export default ProductPage;

为什么产品prop在开发模式中定义但在构建时间中未定义，我该如何解决？

Answer 1

在代码中查找产品似乎未定义，可能是因为try块中的代码无法返回数据（或者您没有在MongoDB数据库中找到匹配的文档？）。您可以验证没有错误发生吗？

如果在MongoDB数据库中_id字段的类型为“ ObjectID”，而将id参数作为“字符串”传递时，可能会发生这种情况。您可以通过使用MongoDB软件包将“ id”字符串转换为ObjectID来解决此问题。

Answer 2

我最近遇到了完全相同的问题。我不确定您在//the rest of the component部分中输入了什么，但是我注意到在getStaticPaths函数中您指定了fallback: true。确保通过在构建时为尚不存在的页面添加框架或加载指示器来在页面组件中进行处理。那对我有用。

getStaticPaths和getStaticProps可在开发中使用，但在构建时未定义道具

2 个答案: