React+TypeScript报错：Cannot read properties of undefined (reading 'map')及导入变灰问题

1. "Cannot read properties of undefined (reading 'map')" 报错原因 #

你的组件Products定义了props参数bags，这个参数和你从products.ts导入的变量bags重名了。组件内部会优先使用props传入的bags，但你在使用Products组件时并没有传递这个props，导致props里的bags是undefined，调用map方法自然就报错了。

两种修正方式： #

• 方式一：直接使用导入的全局数据
  删掉组件的props，直接用导入的bags：

  import Link from 'next/link';
  import { bagsTypes } from '../../const/types';
  import bags from '../../const/products';
  
  function Products() {
    return (
      <div>
        {bags.map((bag) => (
          <div key={bag.name}>
            <p>{bag.name}</p>
          </div>
        ))}
      </div>
    );
  }
  
  export default Products;
  

• 方式二：通过props传递数据
  保留组件的props，但在使用Products组件的地方传入导入的bags：

  // 示例：在父组件中使用Products
  import Products from './page';
  import bags from '../../const/products';
  
  function ParentComponent() {
    return <Products bags={bags} />;
  }
  

2. 导入代码呈灰色的原因 #

你导入了bags变量，但组件内部实际使用的是props里的bags，IDE会判定这个导入的变量未被使用，所以把代码标灰。按照上面的任意一种方式修正后，导入的变量被正常使用，灰色标记就会消失。

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