Next.js中JSX代码报Expression expected及Unexpected token错误如何解决

DevOps 小满

2026-10-6

报错原因分析

JSX 语法中，{} 插值标记仅支持放入单个表达式，不支持直接放入变量声明、return 等语句：

列表页的写法合法，是因为 {} 内包裹的是 posts.map() 整体，这本身是一个返回 JSX 数组的表达式，map 内部箭头函数的代码块属于函数内部逻辑，不违反 JSX 语法规则。
详情页的写法错误，是因为直接在 {} 内写了 const 变量声明、return 语句，这些都属于语句，不是合法的表达式，因此触发语法报错。

修复方案

方案1（推荐）：把日期计算逻辑提前到 JSX 外

在组件的 return 语句之前先完成日期格式化，JSX 内直接引用结果即可，代码可读性更高：

// 组件逻辑区，提前计算格式化后的日期
const _date = new Date(post.expiryDate);
// 补充说明：原有日期API使用有误，getMonth返回0-11需加1，getDay返回周几，拿日期要使用getDate
const _expiryDate = `${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`;

// JSX 渲染区直接使用
<tr>
  <td className="table-key">Expiry</td>
  <td className="table-value">{post.expiryDate}</td>
  <td className="table-value">{_expiryDate}</td>
</tr>

方案2：使用立即执行函数包裹语句块

如果确实需要在 JSX 内写多语句逻辑，可以用立即执行函数（IIFE）把语句块转为表达式：

<tr>
  <td className="table-key">Expiry</td>
  <td className="table-value">{post.expiryDate}</td>
  {
    (() => {
      const _date = new Date(post.expiryDate);
      const _expiryDate = `${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`;
      return <td className="table-value">{_expiryDate}</td>;
    })()
  }
</tr>

额外说明

原有日期格式化代码存在逻辑错误：