TypeError: 无法读取undefined的startsWith属性问题求助

错误根源 #

你遇到的TypeError: Cannot read properties of undefined (reading 'startsWith')，本质是router.push(url)中的url为undefined，导致router.push无法解析有效地址。问题出在PaymentMethod函数没有正确返回Stripe支付会话的URL，同时缺少错误处理机制。

具体问题点 #

1. PaymentMethod函数无返回值
   你提供的PaymentMethod代码片段中，仅创建了transformedItem和Stripe会话，但没有返回会话的url属性，函数默认返回undefined，导致Submit函数中url变量为空。

2. 缺少异步错误捕获
   PaymentMethod作为异步函数，仅包含try块未添加catch逻辑，一旦Stripe会话创建失败（如参数错误、API密钥问题），函数会直接抛出错误，未做任何处理，同样会导致url变量无法正常赋值。

3. env变量的潜在验证问题
   虽然你确认NEXT_PUBLIC_FRONTEND_URL已定义，仍需验证：

   • 变量是否在项目根目录的.env文件中
   • 定义格式是否正确（如NEXT_PUBLIC_FRONTEND_URL=https://your-domain.com，无多余引号或空格）
   • 开发服务器是否在添加变量后重启（确保变量加载生效）

修复代码 #

补全PaymentMethod函数 #

export const PaymentMethod = async (body) => {
    try{
        await connect()
        const transformedItem=[
            {
                price_data:{
                    currency:'usd',
                    product_data:{
                        name: body.title
                    },
                    unit_amount: body.price * 100,
                },
                quantity:1,
            },
        ]
        const session = await stripe.checkout.sessions.create({
            payment_method_types:['card'],
            line_items:transformedItem,
            mode:'payment',
            success_url:`${process.env.NEXT_PUBLIC_FRONTEND_URL}/success`,
            cancel_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/cancel`,
        })
        // 返回Stripe支付会话的URL
        return session.url
    } catch (error) {
        // 捕获并打印错误，同时抛出给上层处理
        console.error('创建支付会话失败:', error)
        throw error
    }
}

优化Submit函数的错误处理 #

const Submit= async()=>{
    try {
        const url = await PaymentMethod({ ...form.getValues(), price})
        // 确保URL存在再执行跳转
        if (url) {
            router.push(url)
        } else {
            console.error('支付会话URL生成失败')
            // 这里可添加用户友好的错误提示，如弹窗或页面提示
        }
    } catch (error) {
        console.error('提交请求失败:', error)
        // 显示用户可见的错误信息
    }
}

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