React项目迁移TypeScript时.tsx导入与products.find报错问题咨询

导入.tsx文件需加@ts-ignore的修复方案 #

现有tsconfig配置完全符合TS+React项目要求，无需额外调整。导入报错的原因是手动添加了.tsx后缀，TS默认会自动解析.ts/.tsx后缀的模块，无需显式写在导入路径中。
修改导入语句即可删除@ts-ignore注释：

import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

products.find is not a function报错的修复方案 #

该问题为运行时错误，与TS类型定义无直接关联，错误原因是上层组件传递的products实际值不为数组（多数场景是初始渲染时数据未完成请求，传递了undefined或null），可按以下步骤修复：

1. 优化类型定义，兼容空值场景，同时抽离可复用类型：

// 抽离商品类型方便后续复用
type ProductItem = {
  id: number;
  price: number;
  description: string;
  listing_type: string;
  image: string;
}
type Props = {
  // 标记products为可选，兼容上层初始传空的场景
  products?: ProductItem[];
  // 替换全局MouseEvent为React内置鼠标事件类型
  addToCart: (e: React.MouseEvent) => void;
  user: {
    id: number;
    isAuth: boolean;
  };
}

2. 增加空值处理和兜底渲染逻辑，避免运行时报错：

// 给products设置默认空数组，避免空值调用方法报错
const Product: React.FC<Props> = ({ products = [], addToCart, user }) => {
  const { productId } = useParams<{productId: string}>()
  const product = products.find(product => product.id === Number(productId));

  // 增加兜底逻辑，商品未加载/不存在时显示对应提示
  if (!product) {
    return <div>商品加载中或不存在</div>
  }

  return (
    <div>
      <Grid container spacing={1} style={{ maxWidth: 1100, margin: '0 auto', marginTop: '5rem' }}>
        <Grid item sm={4}>
          <ProductImage image={product.image} />
        </Grid>
        <Grid item sm={8}>
          {/* 无需手动声明事件类型，TS可自动推导 */}
          <ProductInfo product={product} onClick={addToCart} user={user}/>
        </Grid>
      </Grid>
    </div>
  );
}

3. 检查上层组件传递products的逻辑，确保最终传递值为数组，初始状态不要设置为null或空对象。

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