Question

导航到“图库和联系人链接”时出现以下错误，但单击首页链接（'/'）时除外。

head-manager.js:2 
Uncaught (in promise) TypeError: Cannot read property 'join' of undefined
    at head-manager.js:2

下面是我的header.js组件：

import Link from 'next/link'

import { COLORS, FONT_SIZE } from '../theme/constants'

const Header = () => {
  return (
    <header>
      <Link href='/'>
        <a className='site-name'>Name</a>
      </Link>
      <nav>
        <Link href='/'>
          <a>Home</a>
        </Link>
        <Link href='/gallery'>
          <a>Gallery</a>
        </Link>
        <Link href='/contact'>
          <a>Contact</a>
        </Link>
      </nav>
    </header>
  )
}

export default Header

Answer 1

我认为问题不在上述组件中，但可能在您的_document.js，_app.js或试图更新title或其他Head属性的相关页面中。如果用于设置值的属性不存在，则会看到此错误：

如果下面没有props.myUndefinedProperty，您将看到：

head-manager.js:2 Uncaught (in promise) TypeError: Cannot read property 'join' of undefined

import Head from 'next/head';
...
return (
  ...
  <Head>
     <title>{props.myUndefinedProperty}</title>
  </Head>

Answer 2

我发现了问题。我正在使用getStaticProps从index.js文件中的sitedata.json获取数据，并将文件内容作为prop通过Layout组件传递。那就是我的标头和标头组件如何接收网站标题和描述信息。但是我没有通过“图库”和“关于”页面文件。我认为，如果我从索引文件中获得它们一次，便可以在全局范围内使用它们，但事实并非如此。我必须在每个页面文件上使用getStaticProps获取该数据，从而消除了错误。

NextJS导航问题

2 个答案: