Next.js 13动态组件API数据获取无返回，请求排查解决

核心问题 #

1. 语法错误阻断执行：console(response.data) 缺少 .log，属于无效语法，会直接中断函数流程，导致这行日志和后续数据返回操作都无法完成。
2. 异步函数调用未处理：getFeaturedArticles 是异步函数，直接调用仅返回Promise对象而非实际API数据，同时Next.js组件中直接调用未处理的异步函数会引发渲染异常。

修正方案（分两种场景） #

场景1：App Router 服务器组件（默认模式）

服务器组件原生支持async/await语法，无需额外状态管理：

import axios from "axios";

const baseURL = 'http://127.0.0.1:8000/api/articles/'

async function getFeaturedArticles(slug) {
    const response = await axios({
      method: 'GET',
      url: `${baseURL}${slug}`,
    });
    console.log(response.data) // 修正console为console.log
    return response.data;
}

// 将组件改为async函数
export default async function ArticleExpand({ params }) {
    // 添加await获取实际数据
    const article = await getFeaturedArticles(params.slug);
    console.log(article);
    return (
        <div>
           <div>
            {/* 用可选链避免数据未加载时的报错 */}
            {article?.title}
           </div>
        </div>
    )
}

场景2：客户端组件（需交互或浏览器API支持）

若组件需在客户端运行，需结合useEffect和状态管理处理异步请求：

'use client'; // 标记为客户端组件
import axios from "axios";
import { useState, useEffect } from "react";

const baseURL = 'http://127.0.0.1:8000/api/articles/'

async function getFeaturedArticles(slug) {
    const response = await axios({
      method: 'GET',
      url: `${baseURL}${slug}`,
    });
    console.log(response.data);
    return response.data;
}

export default function ArticleExpand({ params }) {
    const [article, setArticle] = useState(null);

    useEffect(() => {
        const fetchArticle = async () => {
            const data = await getFeaturedArticles(params.slug);
            setArticle(data);
            console.log(data);
        };
        fetchArticle();
    }, [params.slug]);

    // 数据加载中显示占位内容
    if (!article) return <div>Loading...</div>;

    return (
        <div>
           <div>
            {article.title}
           </div>
        </div>
    )
}

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