Next.js中Promise内部return无法正常渲染页面的问题修复

你的代码有两个致命问题，也是build后逻辑失效、Promise内return不生效的核心原因：

• 违反React Hook调用规则：useAddress是标准React Hook，只能在函数组件的顶层作用域调用，你把它写在Promise构造函数内部，开发模式下校验宽松可能侥幸运行，生产构建会触发Hook调用顺序异常，直接导致逻辑错乱。
• React函数组件的渲染是同步流程：组件必须在执行时直接返回要渲染的JSX，你把JSX写在Promise的then/catch回调里，回调的返回值只会被Promise内部接收，根本不会传递给React的渲染流程。你换成console.log能正常输出，是因为打印操作本身在回调里执行了，但return的JSX从来没有被组件返回过，自然不会渲染到页面上。

完全不需要引入Promise做条件判断，直接用React原生的同步条件渲染即可，符合React语法规范，生产构建也不会出现逻辑失效问题：

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，符合React调用规则
    const address = useAddress();

    // 有地址时返回登录后内容
    if (address) {
        return (
            <>
                <Head>
                    <title>DRUMM3R</title>
                    <link rel="icon" href="/drum.svg" />
                </Head>
                <Username address={address} />
            </>
        );
    }

    // 无地址时返回登录引导
    return (
        <>
            <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;

如果后续遇到需要依赖异步结果（比如接口请求）渲染的场景，也不要在Promise回调里直接return JSX，正确做法是：

1. 用useState定义状态存储异步返回的结果
2. 在useEffect里执行异步逻辑，拿到结果后更新状态
3. 组件内基于状态做同步条件判断，返回对应JSX

示例写法：

import { useState, useEffect } from "react";

const Demo = () => {
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    // 异步逻辑放在useEffect中执行
    fetchUserInfo().then(res => setUserInfo(res));
  }, []);

  // 加载状态
  if (!userInfo) return <div>加载中...</div>;
  // 加载完成返回正式内容
  return <div>欢迎你，{userInfo.name}</div>;
};

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