NextJS 13 使用NextUI Listbox组件时出现<[object Object]>错误

问题根源 #

1. 错误的组件层级结构：你在循环里给每个ListboxItem单独套了Listbox组件——Listbox是容器组件，应该用来包裹所有选项，而非每个选项单独对应一个容器。这种错误层级会导致组件渲染时解析出对象格式的错误输出。
2. 语法错误：return语句里的<div>{items};</div>多了一个分号，这个分号会被当作文本节点渲染，干扰组件的正常输出。
3. 缺少客户端组件声明：NextUI的交互组件需要在客户端环境运行，Next.js 13 App Router默认是Server Component，必须显式添加'use client'指令才能让NextUI组件正常工作。

修正后的代码 #

'use client'; // 必须放在文件最顶部，声明为客户端组件
import React from 'react';
import { db } from '@/db';
import ListboxWrapper from '../common/ListboxWrapper';
import { Listbox, ListboxItem } from '@nextui-org/react';

type Props = {};

const TopicList = async (props: Props) => {
  const topics = await db.topic.findMany();

  console.log(topics);

  return (
    <ListboxWrapper>
      <Listbox>
        {topics.map(item => (
          <ListboxItem key={item.id}>{item.slug}</ListboxItem>
        ))}
      </Listbox>
    </ListboxWrapper>
  );
};

export default TopicList;

额外注意事项 #

• 如果你的ListboxWrapper设计是用来包裹单个选项的，那要调整层级，把Listbox放在最外层，确保所有ListboxItem都在同一个Listbox容器内。
• 检查ListboxWrapper的内部实现，确保它没有破坏NextUI组件的层级依赖关系，比如不要在Wrapper中添加不符合组件规范的嵌套元素。

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