NextJS 9.3 链接不是 JSX 元素的构造函数

Question

尝试创建一个 Link 元素，其中包含一个标题和一个用于 href 的 slug。

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';

type Props = {
  title: string;
  slug: string;
};

const NavElement = ({ title, slug }: Props) => {
  return (
    <Link href={slug}>
      <a>{title}</a>
    </Link>
  );
};

export default NavElement;

package.json 中的依赖项

  "dependencies": {
    "@types/react": "^16.9.34",
    "@types/styled-components": "^5.1.0",
    "axios": "^0.19.2",
    "contentful": "^7.14.3",
    "moment": "^2.24.0",
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-lottie": "^1.2.3",
    "styled-components": "^5.1.0"
  }

得到这个错误：

JSX element type 'Link' is not a constructor function for JSX elements.
  Type 'Link' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2605)
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

通过 nextjs 文档和以前的案例，我已经完成了它，并且我一生都无法发现问题所在。有什么建议吗？

Answer 1

如果你用大括号括起来，你会丢失一个 return 语句

试试这个...

const NavElement = ({ title, slug }: Props) => (
  <Link href={slug}>
    <a>{title}</a>
  </Link>;
);

或者这个

const NavElement = ({ title, slug }: Props): JSX.Element => {
  return (
    <Link href={slug}>
      <a>{title}</a>
    </Link>
  );
};