Next.js 14.0.1报错TypeError: 无法读取undefined的'price'属性求助

我写了一段计算商品小计的代码，在其他模板里能正常工作，但在Next.js中跑不起来，代码如下：

let subTotal = 0

if (selectedProducts?.length) {
    for (let id of selectedProducts) {
        const price = products.find(product => product.id === id).price
        subTotal += price
    }
}

我的代码仓库：e-commerce

已经尝试了所有已知的解决方法，恳请帮助，非常感谢。

可能的问题点及解决思路 #

1. 数据加载时机不匹配（Next.js SSR/SSG特性） #

Next.js的服务端渲染/静态生成机制，可能导致products或selectedProducts在计算逻辑执行时还未完成数据加载，出现undefined的情况。

• 解决：确保计算前数据已就绪。客户端渲染场景下，可将计算逻辑放入useEffect；服务端渲染场景下，在getServerSideProps/getStaticProps中先获取完整数据再传递给组件。

2. 未处理找不到商品的情况 #

products.find(...)可能返回undefined，此时直接访问.price会抛出错误。其他模板可能隐含了容错处理，但Next.js的错误机制会直接暴露这个问题。

• 解决：添加空值校验：

let subTotal = 0

if (selectedProducts?.length && products?.length) {
    for (let id of selectedProducts) {
        const product = products.find(product => product.id === id)
        if (product) {
            subTotal += product.price
        }
    }
}

3. ID类型不匹配 #

检查selectedProducts中的ID类型与products里的ID类型是否一致（比如一个是字符串、一个是数字），类型不匹配会导致find方法找不到对应商品。

• 解决：统一ID类型后再比较：

const product = products.find(product => String(product.id) === String(id))

4. 严格模式下的重复执行问题 #

Next.js开发环境的严格模式会重复执行部分逻辑，可能引发意外的状态异常。可临时在next.config.js中设置reactStrictMode: false，排查是否是该原因导致。

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