Next 13客户端组件结合Sanity获取数据失败，求实现示例

核心注意事项 #

客户端组件必须以 'use client' 开头声明，且不能在组件顶层直接使用 await，需通过 useEffect 或数据获取库处理异步逻辑。以下提供两种可行改造方案：

方案一：使用 React 原生 useEffect + useState #

直接修改 app/users/page.js 为客户端组件：

'use client';

import { useState, useEffect } from 'react';
import { getUsers } from '../sanity/queries';

export default function UsersPage() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await getUsers();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <main className="pt-[100px]">加载中...</main>;
  if (error) return <main className="pt-[100px]">出错了：{error}</main>;

  return (
    <main className="pt-[100px]">
      {JSON.stringify(users)}
    </main>
  );
}

方案二：使用 TanStack Query（原 React Query） #

若你之前使用 React Query 无效，大概率是未配置全局 Provider。

1. 配置根布局的 QueryClientProvider #

修改 app/layout.js：

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export default function RootLayout({ children }) {
  const queryClient = new QueryClient();

  return (
    <html lang="zh-CN">
      <body>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </body>
    </html>
  );
}

2. 改造用户页面组件 #

修改 app/users/page.js：

'use client';

import { useQuery } from '@tanstack/react-query';
import { getUsers } from '../sanity/queries';

export default function UsersPage() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: getUsers,
  });

  if (isLoading) return <main className="pt-[100px]">加载中...</main>;
  if (error) return <main className="pt-[100px]">出错了：{error.message}</main>;

  return (
    <main className="pt-[100px]">
      {JSON.stringify(users)}
    </main>
  );
}

额外提醒 #

• 确保 Sanity 的 client 配置仅包含客户端可公开的信息，若需获取私有数据，建议通过 Next.js API 路由转发请求，避免在客户端暴露敏感密钥。
• 若使用 TypeScript，可自行为状态和返回数据添加类型定义。

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