React TypeScript出现TS2322错误：void无法赋值给ReactNode

问题原因 #

React的JSX语法要求嵌入的表达式必须返回ReactNode类型，但console.log()的返回值是void，类型不匹配导致TypeScript抛出TS2322: Type 'void' is not assignable to type 'ReactNode'错误。

解决方案 #

方法1：将console.log移到JSX返回前执行 #

直接在map的回调函数里先执行日志，再返回JSX元素，避免把void类型的结果传入JSX：

const ReduxComp: React.FC = () => {
  const dispatch: AppDispatch = useDispatch();
  const { products, loading, error } = useSelector((state: RootState) => state.products);

  useEffect(() => {
    dispatch(fetchProducts());
  }, []);

  return (
    <div>
      <h2>Redux Comp</h2>
      {products.length > 0 && products.map((d: any, index: number) => {
        // 先执行日志，再返回JSX
        console.log('d - ', d);
        return <div key={index}></div>;
      })}
    </div>
  )
}

方法2：使用逗号表达式返回合法ReactNode #

如果一定要在JSX内部写日志，用逗号表达式让最终返回值为null或空字符串（合法的ReactNode）：

{ (console.log('d - ', d), null) }

额外优化建议 #

• 无需维护productsData状态，直接使用useSelector返回的products即可，减少不必要的状态同步逻辑。
• 尽量避免使用any类型，定义具体的产品类型（比如interface Product { id: number; name: string; ... }），提升类型安全性。

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