React使用<Link>组件包裹元素报错：TS1109与} expected

你遇到的两个错误，核心原因是JSX表达式中不能直接使用if语句，同时代码的结构嵌套、语法闭合也存在问题，导致编译器无法正确解析。

错误点拆解 #

• JSX的{}语法块仅支持表达式，不能直接写入if这类语句，这直接触发了"TS1109: Expression expected"错误
• 代码的标签、括号闭合不完整，加上Link的包裹逻辑混乱，引发了"} expected"语法缺失错误

修正后的代码 #

const ContactsTableRow = ({ item, columns }: ContactsTableRowProps) => {
  return (
    <tr className={styles.body__tr}>
      {columns.map((columnItem: { name: string }, index: number) => {
        // 针对id列，用Link跳转包裹内容；其他列直接渲染
        if (columnItem.name === "id") {
          return (
            <td key={index} className={clsx(styles.body__td, styles.body__action)}>
              <Link 
                to={`/contacts/${item.id}`} 
                className={clsx(styles.action__title, styles.action__link)}
              >
                {item[columnItem.name]}
              </Link>
            </td>
          );
        }
        // 其他列的默认渲染逻辑
        return (
          <td key={index} className={styles.body__td}>
            <p>{item[columnItem.name]}</p>
          </td>
        );
      })}
    </tr>
  );
};

关键修改说明 #

1. 将if分支判断移到JSX表达式外部，直接在map回调函数内做逻辑处理，符合TS/JS语法规则
2. 调整Link的包裹范围：仅用Link包裹td内的可点击文本，而非反向嵌套条件判断
3. 把硬编码的路由参数99改成动态的item.id，贴合实际业务跳转需求
4. 补全所有未闭合的标签与括号，解决语法缺失问题

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