Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?の解決方法

結論

子コンポーネントがaタグをラップしていないのにpassHrefを使用したことによるエラーだった模様

実際のエラー文

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

該当のコード

import { Phrases } from '../../types/types'
import PhraseCard from '../molecules/PhraseCard'
import CardCase from '../atoms/CardCase'
import Link from 'next/link'

const PhraseCardList: React.VFC<Phrases> = ({ phrases }) => {
  return (
    <ul className="w-full">
      {phrases &&
        phrases.map((phrase) => (
          <li key={phrase.id}>
            <Link href={`/phrases/${phrase.id}`} passHref>
              <CardCase hover={true}>
                <PhraseCard phrase={phrase} />
              </CardCase>
            </Link>
          </li>
        ))}
    </ul>
  )
}

export default PhraseCardList

修正ver

passHrefを使わないようにするとエラーは出なくなった

import { Phrases } from '../../types/types'
import PhraseCard from '../molecules/PhraseCard'
import CardCase from '../atoms/CardCase'
import Link from 'next/link'

const PhraseCardList: React.VFC<Phrases> = ({ phrases }) => {
  return (
    <ul className="w-full">
      {phrases &&
        phrases.map((phrase) => (
          <li key={phrase.id}>
            <Link href={`/phrases/${phrase.id}`}>
              <a>
                <CardCase hover={true}>
                  <PhraseCard phrase={phrase} />
                </CardCase>
              </a>
            </Link>
          </li>
        ))}
    </ul>
  )
}

export default PhraseCardList

参考文献

同じことが書かれていた。

• https://github.com/vercel/next.js/issues/7915

最後に

間違っていることがあれば指摘をお願いいたします。