我努力创建一个动态导航组件。导航项应该从后端生成的Rest API中使用（在我的例子中是Django）。
API相关地址正确显示列表条目（见下文）。但是，我找不到一个合适的方法来调用我的NextJS应用程序中的这些项目。在我的例子中，在components/Navigation.js下
我尝试使用函数getAllPages（./api/wagtail.js）中的页面信息

export async function getAllPages() {
    return await getRequest(`${API_URL}/v1/page_relative_urls/`);
}

在浏览器中的地址

${API_URL}/v1/page_relative_urls/

按预期显示条目并提供以下列表：

{ "meta":
{ "total_count": 8 },
"items": [
{
"title": "Home Page",
"relative_url": "/"
},
{ "title": "About us",
"relative_url": "/about-us/"
},
...
]}

然后我尝试在compoenents/navigation. js中使用getAllPages：

import getAllPages from '../../api/wagtail.js'

const Navtest = () => {
    return <div className={s.Root}>

   <nav>
        {getAllPages.items.map((link, index) => {
          return (
            <ul>
              <Link href={link.title}>
                <li key={index}>{link.title}</li>
              </Link>
            </ul>
          );
        })}
      </nav>

    </div>;
};

Navtest.propTypes = {};

Navtest.defaultProps = {};

export default Navtest;

这将引发错误消息TypeError: Cannot read properties of undefined (reading 'items')
我做错什么了？