TypeScript Bug：类型“null”无法分配给类型“SetStateAction”<string>

Question

这是我的 App.tsx 文件。所以我正在关注一个使用 JavaScript 的视频，但是在使用 TypeScript VS Code 编写该视频时显示了这些错误：

源代码：

import React, { useEffect, useState } from 'react';
import './output.css'; // Adjust path if necessary
import {auth, provider} from './config' ;
import { signInWithPopup } from 'firebase/auth';
import Home from './Home';

function SignIn(){

  const [value,setValue] = useState('')
  const handleClick = () => {
    signInWithPopup(auth, provider).then((data) => {
      setValue(data.user.email)
      localStorage.setItem("email", data.user.email)
    })
  }

  useEffect(() => {
    setValue(localStorage.getItem('email'))
  })

return (
  <div>
  {value?<Home/>:
    <button onClick={handleClick} className='px-2 bg-blue-600 text-white hover:bg-blue-900 pt-2 pb-2 pl-3 pr-3 rounded-md'>Sign in with Google</button>
  }
  </div>
);
}
export default SignIn;

第 12 行：data.user.email 类型为 'string | 的参数null' 不可分配给'SetStateAction' 类型的参数。 类型“null”不可分配给类型“SetStateAction”.ts(2345) （属性）UserCredential.user：用户

第 12 行：data.user.email 类型为 'string | 的参数null' 不可分配给'string' 类型的参数。 类型“null”不可分配给类型“string”。ts(2345)

第 18 行： localStorage.getItem('email') 'string | 类型的参数null' 不可分配给'SetStateAction' 类型的参数。 类型“null”不可分配给类型“SetStateAction”.ts(2345)

我预计在 ts 中编写 js 不会出现问题，但在 ts 中，因为我需要为变量提供某些类型，这可能就是发生这些错误的原因......

如何解决这个问题？

Answer 1

这应该可以完成工作：

import React, { useEffect, useState } from 'react';
import './output.css'; // Adjust path if necessary
import {auth, provider} from './config' ;
import { signInWithPopup } from 'firebase/auth';
import Home from './Home';

function SignIn(){

  const [value,setValue] = useState('')
  const handleClick = () => {
    signInWithPopup(auth, provider).then((data) => {
      if(data.user.email){ // this will check if email is string
         // this will only run if email is a string
         setValue(data.user.email)
         localStorage.setItem("email", data.user.email)
      }
    })
  }

  useEffect(() => {
    const storedEmail = localStorage.getItem('email');
    if(storedEmail) {
       setValue(storedEmail);
    }
  })

return (
  <div>
  {value?<Home/>:
    <button onClick={handleClick} className='px-2 bg-blue-600 text-white hover:bg-blue-900 pt-2 pb-2 pl-3 pr-3 rounded-md'>Sign in with Google</button>
  }
  </div>
);
}
export default SignIn;