Next.js SSR中如何正确向AddToCart组件传URL并解决类型错误

1. 为AddToCart组件定义正确的Props类型 #

你遇到的类型错误核心是没有正确定义组件接收的props结构。因为你传递的是一个包含url属性的对象，所以需要为组件的props创建一个类型/接口，而不是直接设为string类型。

// AddToCart.tsx (客户端组件，记得加'use client'指令)
'use client';

// 定义props的类型
interface AddToCartProps {
  url: string;
}

export default function AddToCart({ url }: AddToCartProps) {
  const handleClick = () => {
    // 直接访问url属性，而不是整个props对象
    window.open(url, '_blank');
    // 如果是弹窗显示url，用alert(url)而非alert(props)
    // alert(url);
  };

  return <button onClick={handleClick}>加入购物车并打开链接</button>;
}

2. 在ProductCard中正确传递props #

确保循环渲染时，传递的是item.url作为url属性的值：

// ProductCard.tsx
import AddToCart from './AddToCart';

interface Product {
  url: string;
  // 其他产品属性，比如name、price等
}

export default function ProductCard({ item }: { item: Product }) {
  return (
    <div className="product-card">
      {/* 其他产品信息 */}
      <AddToCart url={item.url} />
    </div>
  );
}

3. 在page.tsx中循环渲染ProductCard #

作为SSR页面，直接循环服务端获取的产品列表即可：

// page.tsx
import ProductCard from './ProductCard';

// 从服务端获取产品数据
async function getProducts() {
  // 模拟服务端数据请求
  return [
    { url: 'https://example.com/product1', name: '产品1' },
    { url: 'https://example.com/product2', name: '产品2' },
  ];
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div className="products-grid">
      {products.map((item, index) => (
        <ProductCard key={index} item={item} />
      ))}
    </div>
  );
}

错误原因解析 #

• "Parameter 'props' implicitly has an 'any' type"：TypeScript要求明确组件props的类型，未定义时默认视为any，这是严格类型检查的提示。
• "Type '{ url: string; }' is not assignable to type 'string'"：你把组件props类型设为string，但实际传递的是包含url属性的对象，类型不匹配。
• 点击弹出[object Object]：点击事件中直接alert了整个props对象（而非props.url），对象转为字符串后就是[object Object]。

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