尝试在Vercel上部署时遇到无效类型错误

jm2pwxwz 于 2022-10-21 发布在其他

关注(0)|答案(1)|浏览(306)

我正在尝试通过使用nextjs和类型脚本来制作一个Web应用程序。我在本地主机上开发时没有错误。当我尝试在Vercel上部署时遇到错误，然后我可以在运行‘npm run lint’时检查错误。
以下是错误所在。

./components/post/PostList.tsx
11:42  Error: Invalid type "string | undefined" of template literal expression.  @typescript-eslint/restrict-template-expressions

// PostList.tsx
export const PostList = ({posts} : Posts) => {
  return (
    <main>
      <div className="mx-auto grid max-w-[768px] gap-y-4 px-4 pb-[100px] md:max-w-[1080px] md:grid-cols-3 md:gap-x-6 md:gap-y-[30px]">
        {posts.map((post, i) => {
          return (
            <Link key={i} href={`/blog/${post.slug}`}> // Here is the error line
              <a>
                <PostItem post={post.frontMatter} />
              </a>
            </Link>
          )
        })}
      </div>
    </main>
  )
}

Slug只是一个文件名字符串。我不知道该如何处理这个错误。

// post.slug
slug: 'hello-world copy 3'

下面是另一个TSX文件和相同的错误。

// [slug].tsx
export const getStaticProps: GetStaticProps = (context) => {
  // get content for each blog
  const mdfile =  fs.readFileSync(`posts/${context.params?.slug}.md`); // Here is same error...
  const { data: frontMatter, content } = matter(mdfile);

  return {
    props: {
      frontMatter,
      content,
    }
  }
}

next.js

来源：https://stackoverflow.com/questions/74093405/i-met-an-invalid-type-error-when-i-tried-to-deploy-on-vercel

1条答案

按热度按时间

xfb7svmp1#

尝试为参数提供缺省值

<Link key={i} href={`/blog/${post.slug || ''}`}>

或者，更好的做法是检查是否定义了post.slug：

{
    posts.map((post, i) => {
      if (!post.slug) return <div key={i}>Post missing</div>
      return (
        <Link key={i} href={`/blog/${post.slug}`}>
          <a>
            <PostItem post={post.frontMatter} />
          </a>
        </Link>
      );
    });
  }

对于[slug].tsx，您可以添加一个空检查，并在未定义变量时返回默认值：

export const getStaticProps: GetStaticProps = (context) => {
  // get content for each blog
  if (!context.params || !context.params.slug) return { props: { frontMatter: 'default-value', content: 'default-value' } }

  const mdfile = fs.readFileSync(`posts/${context.params.slug}.md`);
  const { data: frontMatter, content } = matter(mdfile);

  return {
    props: {
      frontMatter,
      content,
    },
  };
};

赞(0）回复(0）举报 2022-10-21

我来回答

尝试在Vercel上部署时遇到无效类型错误

1条答案

相关问题

热门标签

最新问答