“null”类型的参数不可分配给“string”类型的参数。使用参考

如何将 useRef.current 输入为字符串？我尝试将 UseRef 的初始值作为字符串传递，但随后出现了另一个问题，将此引用传递给组件时出现键入问题

'use client'
import React, { FormEvent, forwardRef, useRef, useState } from 'react'
import { Button, Stack, TextField } from '@mui/material'
import styles from './mainPage.module.scss'
import { useTodo } from '../../hooks/useTodo'

const MainPage = () => {


    const { functions, get } = useTodo()
    const titleRef = useRef(null)

    const sendTodo = (e: FormEvent) => {
        e.preventDefault()
        if(titleRef.current === '') return
        functions.create(titleRef.current, '')
        titleRef.current = null
    }
    
    return (
        <div className={styles.root}>
            <Stack spacing={1} width='20%' component='form' onSubmit={(e) => sendTodo(e)}>
                <TextField ref={titleRef} value={titleRef.current} id="outlined-basic" label="Outlined" variant="outlined" />
                <Button type='submit' variant='outlined'>Create</Button>
            </Stack>
            
        </div>
    )
}

export default MainPage

import React, { FormEvent, useEffect } from "react"


export interface ITodo {
    id: number
    title: string
    description: string
}

export interface IUseTodoReturn {
    functions: {
        create: (title: string, description: string) => void
        delete: (id: number) => void
    } 
    get: ITodo[]
}


export const useTodo = (): IUseTodoReturn => {

    const [todo, setTodo] = React.useState<ITodo[]>([])

    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todo))
    }, [ todo ])


    const createTodo = (title: string, description: string): void => {
        setTodo([...todo, { id: Date.now(), title, description }])
    }


    const deleteTodo = (id: number) => {
        const filteredArray = todo.filter(todo => todo.id !== id)
        setTodo(filteredArray)
    }


    return {
        functions: { create: createTodo, delete: deleteTodo },
        get: todo
    }
}