TypeScript环境下Next.js搜索页API数据映射报错求助

1. 先明确数据类型 #

首先定义你的产品数据结构，TypeScript需要知道每个产品的字段和类型：

// 根据你的API返回结构调整字段
interface Product {
  id: string;
  name: string;
  price: number;
  // 其他你需要的字段，比如图片地址、描述等
}

2. 修复自定义useFetch Hook的类型推断问题 #

你遇到的map不存在于never类型错误，是因为Hook没有明确返回数据的类型，TypeScript无法推断data的结构。把Hook改成泛型结构，让它支持指定返回数据类型：

import { useState, useEffect } from 'react';

// 泛型Hook，T代表返回数据的类型
function useFetch<T>(url: string) {
  // 初始值设为匹配类型的空数组，避免TypeScript推断为never
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('请求失败');
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err.message : '未知错误');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

3. 在组件中指定类型并消除隐式any #

在搜索页组件里，给useFetch指定泛型为Product，同时给map的参数显式指定Product类型：

import { useSearchParams } from 'next/navigation';
import ProductCard from './ProductCard';

export default function SearchPage() {
  const { query } = useSearchParams();
  const searchQuery = query.get('q') || '';
  
  // 指定泛型为Product，让TypeScript知道返回的是Product数组
  const { data: products, loading, error } = useFetch<Product>(`/api/search?q=${searchQuery}`);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div className="search-results">
      {/* 给product参数指定Product类型，消除隐式any错误 */}
      {products.map((product: Product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

4. 给ProductCard组件添加Props类型（可选但推荐） #

为了让组件类型更严谨，给ProductCard的Props也定义类型：

// ProductCard.tsx
interface ProductCardProps {
  product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>¥{product.price}</p>
      {/* 其他产品信息渲染 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Gopal Krishan Bhardwaj