@typescript-eslint/no-misused-promises

事象

voidを期待しているが、Promiseがreturnされていて、「@typescript-eslint/no-misused-promises」のエラーが出る。

web:build: ./src/pages/login.tsx
web:build: 15:29  Error: Promise-returning function provided to attribute where a void return was expected.  @typescript-eslint/no-misused-promises
web:build: 24:29  Error: Promise-returning function provided to attribute where a void return was expected.  @typescript-eslint/no-misused-promises

修正前

import React from 'react';
import { useSession, signIn, signOut } from 'next-auth/react';
import { type NextPage } from 'next';

const Login: NextPage = () => {
  const { data: session } = useSession();
  
  return (
    <>
      {
        // セッションがある場合、ログアウトを表示
        session && (
          <div>
            <h1>ようこそ, {session.user && session.user.email}</h1>
            <button onClick={() => signOut()}>ログアウト</button>
          </div>
        )
      }
      {
        // セッションがない場合、ログインを表示
        !session && (
          <div>
            <p>ログインしていません</p>
            <button onClick={() =>signIn()}>ログイン</button>
          </div>
        )
      }
    </>
  );
};

export default Login;

修正方法1

<button onClick={() =>void signIn()}>ログイン</button>のようにvoidをつける。

import React from 'react';
import { useSession, signIn, signOut } from 'next-auth/react';
import { type NextPage } from 'next';

const Login: NextPage = async () => {
  const { data: session } = useSession();
  
  return (
    <>
      {
        // セッションがある場合、ログアウトを表示
        session && (
          <div>
            <h1>ようこそ, {session.user && session.user.email}</h1>
            <button onClick={() => void signOut()}>ログアウト</button>
          </div>
        )
      }
      {
        // セッションがない場合、ログインを表示
        !session && (
          <div>
            <p>ログインしていません</p>
            <button onClick={() => void signIn()}>ログイン</button>
          </div>
        )
      }
    </>
  );
};

export default Login;

修正方法3

import React from 'react';
import { useSession, signIn, signOut } from 'next-auth/react';
import type { NextPage } from 'next';

const Login: NextPage = () => {
  const { data: session } = useSession();

  const handleSignIn = async () => {
    await signIn();
  };

  const handleSignOut = async () => {
    await signOut();
  };

  return (
    <>
      {
        // セッションがある場合、ログアウトを表示
        session && (
          <div>
            <h1>ようこそ, {session.user && session.user.email}</h1>
            <button onClick={void handleSignOut}>ログアウト</button>
          </div>
        )
      }
      {
        // セッションがない場合、ログインを表示
        !session && (
          <div>
            <p>ログインしていません</p>
            <button onClick={void handleSignIn}>ログイン</button>
          </div>
        )
      }
    </>
  );
};

export default Login;

参考