React TypeScript组件报错求助：FC类型与语法括号问题

错误1：类型'({ note, onBlockClick }: NoteProps) => void'无法分配给类型'FC' #

• 核心原因：React的FC<Props>强制要求组件返回ReactNode（JSX元素、null、undefined都算），你的组件现在返回的是void，说明没正确返回JSX内容。
• 常见问题&修复：
  • 如果你用了带大括号的箭头函数，大概率是漏写了return：

    // 错误写法
    const Note: FC<NoteProps> = ({ note, onBlockClick }) => {
      // 一堆逻辑代码
      // 没写return返回JSX
    };
    

  • 两种修复方式：

    // 方式1：补上return
    const Note: FC<NoteProps> = ({ note, onBlockClick }) => {
      // 逻辑代码
      return (
        <div onClick={() => onBlockClick(note)}>{note.content}</div>
      );
    };
    
    // 方式2：去掉大括号，直接返回JSX
    const Note: FC<NoteProps> = ({ note, onBlockClick }) => (
      <div onClick={() => onBlockClick(note)}>{note.content}</div>
    );
    

错误2：提示需匹配'}'但确认无括号缺失 #

• 大概率是第一个类型错误引发的TS解析混乱，类型不匹配会让TS报错逻辑乱掉，抛出无关的括号提示。先把第一个错误修好，这个提示大概率会自动消失。
• 额外检查点（如果修好第一个错误还存在）：
  • 检查JSX标签是否闭合，比如<img>要写成<img />，嵌套的<div>要成对
  • 检查组件内的对象、函数体括号，比如if语句块、箭头函数的括号是否真的配对

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