NextJS 13中Fetch数据时出现未处理运行时错误，求分析原因

错误原因 #

• Client Component不支持异步定义：如果你的Posts组件添加了'use client'指令（即客户端组件），NextJS 13的App Router不允许客户端组件定义为async函数，也不支持顶层await，这会直接触发未处理运行时错误。
• 未添加错误捕获机制：getPosts函数在请求失败时会抛出错误，但组件中没有任何捕获逻辑（如try/catch），也未使用NextJS的error.js错误边界组件，导致错误直接冒泡成未处理异常。
• 缺少唯一key属性：data.map渲染时未给<p>元素添加key属性，虽然这是React警告，但可能伴随运行时问题出现。

修复方案 #

方案1：作为Server Component使用（默认模式，无需'use client'） #

Server Component天然支持异步组件和顶层await，只需添加错误捕获并补全key：

async function getPosts() {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=10"
  );
  if (!res.ok) {
    throw new Error("Unable to fetch data!");
  }
  return res.json();
}

const Posts = async () => {
  let data;
  let error;
  try {
    data = await getPosts();
  } catch (err) {
    error = err.message;
  }

  if (error) return <div>加载失败：{error}</div>;
  
  return (
    <>
      {data.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  );
};

export default Posts;

方案2：作为Client Component使用（需添加'use client'） #

客户端组件不能直接用异步定义，改用useEffect结合状态管理数据获取流程：

'use client';

import { useState, useEffect } from 'react';

async function getPosts() {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=10"
  );
  if (!res.ok) {
    throw new Error("Unable to fetch data!");
  }
  return res.json();
}

const Posts = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const result = await getPosts();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchPosts();
  }, []);

  if (error) return <div>加载失败：{error}</div>;
  if (!data.length) return <div>加载中...</div>;

  return (
    <>
      {data.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  );
};

export default Posts;

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