Next.js生产构建Promise返回组件条件渲染失效修复

• 违反React Hook调用规则：useAddress属于React Hook，按照规则只能在函数组件顶层、自定义Hook顶层调用。原代码将其写在Promise构造函数的回调内部，属于嵌套函数内违规调用Hook。开发环境下React对Hook规则的校验容错度较高，不会直接阻断运行，但生产构建时会开启严格的静态校验与运行时校验，Hook调用链路异常会直接导致逻辑失效。
• 渲染逻辑不符合React运行机制：React函数组件需要同步返回待渲染的JSX内容，原代码在Promise的then/catch回调中返回的JSX不会被React识别为渲染输出，开发环境下热更新机制可能偶然让页面表现符合预期，生产环境下这部分返回内容会被直接丢弃。

当前场景完全不需要封装Promise，也不需要引入额外的复杂Hook：useAddress本身是响应式Hook，会在钱包连接状态变化时自动触发组件重渲染，你只需要把Hook调用移到组件顶层，直接基于返回值做条件渲染即可。

修复后的完整代码：

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React from "react";

const Home = () => {
    // 组件顶层调用Hook，符合调用规则
    const address = useAddress();

    // 同步返回条件渲染结果
    return address ? (
        <>
            <Head>
                <title>DRUMM3R</title>
                <link rel="icon" href="/drum.svg" />
            </Head>
            <Username address={address} />
        </>
    ) : (
        <>
            <Head>
                <title>DRUMM3R</title>
                <link rel="icon" href="/drum.svg" />                
            </Head>
            <Link href="/">
                <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
            </Link>
        </>
    );       
}

export default Home;

补充：如果后续遇到真正需要异步获取数据再渲染的场景，可以搭配useState存储异步返回结果、useEffect触发异步执行逻辑，不要在Promise回调里直接返回JSX。

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