對象可能為“null”。TS2531

我想使用QrReader根據[https://github.com/Musawirkhann/react_qrcode_generation_scanner

它是由react寫的。但是我想用tsx。

在qrRef.current.openImageDialog()中有一個錯誤Object is possibly 'null'. TS2531

import React, { useState, useRef } from 'react'
import QrReader from 'react-qr-reader'

type ScanFileState = {
  scanResultFile: string
  setScanResultFile: React.Dispatch<React.SetStateAction<string>>
  qrRef: React.MutableRefObject<null>
}

const ScanFile: React.FC<ScanFileState> = () => {

  const qrRef = useRef(null)

  const [scanResultFile, setScanResultFile] = useState('')

  const handleErrorFile = (error) => {
    alert(error)
  }
  const handleScanFile = (result) => {
    if (result) {
      setScanResultFile(result)
    }
  }

  const onScanFile = () => {
    qrRef.current.openImageDialog()
  }

  return (
    <div>
      <button type='button' onClick={onScanFile}>Scan Qr Code</button>
      <QrReader ref={qrRef}
        delay={300}
        style={{ width: '100%' }}
        onError={handleErrorFile}
        onScan={handleScanFile}
        legacyMode />
      <h3>Scanned Code: <a href={scanResultFile}>{scanResultFile}</a></h3>
    </div>
  )
}

export default ScanFile

我試著使用as。但是沒有起作用。錯誤也變為Property 'openImageDialog' does not exist on type 'HTMLButtonElement'. TS2339

  const onScanFile = () => {
    if (!qrRef) {
      return
    }
    (qrRef.current as HTMLButtonElement).openImageDialog()
  }