Next.js map内条件渲染a标签 编译提示标签未正确闭合

JSX 语法要求标签必须在同一个语法块内完成开标签和闭标签的配对，你现在把<a>的开标签拆到三元表达式的两个分支里，闭标签单独写在三元表达式外面，编译器解析时会认为两个分支里的<a>都没有对应的闭合标签，直接抛出标签未闭合的错误。这也是为什么你去掉条件判断、写完整的a标签之后编译就能正常通过。

完全不需要拆分a标签结构，只把动态变化的href属性值放到三元判断里计算即可，写法更简洁也不会触发编译错误。

把原来那段拆分a标签的代码替换为如下内容：

<a 
  target="_blank" 
  rel="noreferrer" 
  href={nid[index] !== undefined ? `${polygonURL}${Cont[index]}/${nid[index]}` : `${unkpolygonURL}${Cont[index]}`}
>
  <div className="flex flex-col items-center cursor-pointer transition-all duration-200 hover:scale-105">
    <img 
      className="h-80 w-80 rounded-2xl object-cover" 
      src={Img[index]} 
      alt="" 
      onError={({ currentTarget }) => {
        currentTarget.onerror = null; // 避免循环触发错误
        currentTarget.src="https://user-images.githubusercontent.com/24848110/33519396-7e56363c-d79d-11e7-969b-09782f5ccbab.png";
      }}
    />
    <div className="p-5">
      <h2 className="text-gray-100 text-3xl">{title[index]}</h2>
      <p className="mt-2 text-sm text-gray-400">{Cont[index]}</p>
    </div>
  </div>
</a>

你代码里的加载状态判断写反了，永远不会正常显示「无NFT」的提示：

• 外层判断totalNFT === 0才进入加载/空状态分支
• 内层又判断totalNFT !== 0才显示无NFT提示，两个条件完全互斥
• 初始加载时totalNFT默认值就是0，会直接显示加载中，等接口返回后如果确实没有NFT，也不会触发空提示

修正后的基础判断逻辑参考：

{totalNFT === 0 ? (
  <Spinner />
) : (
  <>
    <div className="grid space-x-3 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
      {/* 原有NFT列表map渲染逻辑 */}
    </div>
  </>
)}

等接口请求完成后，再根据返回的totalCount值判断是否显示无NFT的提示即可，避免初始加载时闪一下空状态文案。

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